From a77baa04a84f53df9b58392273b9a55c393557e1 Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Sat, 8 May 2021 10:43:28 +0800 Subject: [PATCH] feat: tools --- README.md | 4 + index.html | 2 +- package.json | 8 +- src/packages/base-widgets/button/index.tsx | 12 +- src/packages/base-widgets/image/index.tsx | 69 ++- .../monaco-editor}/MonacoEditor.module.scss | 0 .../monaco-editor}/MonacoEditor.tsx | 32 +- .../common/{ => monaco-editor}/monaco.ts | 0 .../components/header/comp-render.tsx | 27 - src/visual-editor/components/header/index.vue | 40 +- .../components/header/preview.vue | 2 +- .../components/header/useTools.tsx | 165 ++++++ .../right-attribute-panel/index.tsx | 3 +- src/visual-editor/hooks/useModal.tsx | 108 ++++ src/visual-editor/hooks/useVisualData.ts | 17 +- src/visual-editor/utils/is.ts | 94 ++++ src/visual-editor/visual-editor.utils.ts | 1 + yarn.lock | 518 +++++++++++++++--- 18 files changed, 940 insertions(+), 162 deletions(-) rename src/visual-editor/components/{right-attribute-panel => common/monaco-editor}/MonacoEditor.module.scss (100%) rename src/visual-editor/components/{right-attribute-panel => common/monaco-editor}/MonacoEditor.tsx (86%) rename src/visual-editor/components/common/{ => monaco-editor}/monaco.ts (100%) delete mode 100644 src/visual-editor/components/header/comp-render.tsx create mode 100644 src/visual-editor/components/header/useTools.tsx create mode 100644 src/visual-editor/hooks/useModal.tsx create mode 100644 src/visual-editor/utils/is.ts diff --git a/README.md b/README.md index bb8e4ae..676166c 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,10 @@ - [ ] 更多组件的封装 - [ ] 其他... +### 简易说明 +目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内， +然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值 + ## 快速开始 ### 安装依赖 diff --git a/index.html b/index.html index 11603f8..dc56d3c 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/package.json b/package.json index d1581a8..3eb42fc 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "build": "vite build", "build-tsc": "vue-tsc --noEmit && vite build", "serve": "vite preview", + "deploy": "gh-pages -d dist", "format": "prettier --write ./src", "lint": "eslint ./src --ext .vue,.js,.ts,.tsx", "lint-fix": "eslint --fix ./src --ext .vue,.js,.ts,.tsx", @@ -16,12 +17,14 @@ "dependencies": { "@vant/touch-emulator": "^1.2.0", "@vueuse/core": "^4.9.1", + "@vueuse/integrations": "^4.9.1", "axios": "^0.21.1", "dexie": "^3.0.3", "element-plus": "^1.0.2-beta.41", "lodash": "^4.17.21", "monaco-editor": "^0.23.0", "normalize.css": "^8.0.1", + "qrcode": "^1.4.4", "vant": "^3.0.16", "vue": "^3.0.11", "vue-router": "^4.0.6", @@ -45,15 +48,16 @@ "eslint-plugin-import": "^2.22.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-vue": "^7.9.0", + "gh-pages": "^3.1.0", "husky": "^6.0.0", "lint-staged": "^10.5.4", "prettier": "^2.2.1", "sass": "^1.32.10", "typescript": "^4.2.4", "vite": "^2.2.4", - "vite-plugin-components": "^0.8.4", + "vite-plugin-components": "^0.9.0", "vite-plugin-style-import": "^0.10.0", - "vite-plugin-windicss": "^0.14.6", + "vite-plugin-windicss": "^0.16.0-beta.14", "vue-eslint-parser": "^7.6.0", "vue-tsc": "^0.1.0", "windicss": "^2.5.14" diff --git a/src/packages/base-widgets/button/index.tsx b/src/packages/base-widgets/button/index.tsx index 9bcfece..037dc96 100644 --- a/src/packages/base-widgets/button/index.tsx +++ b/src/packages/base-widgets/button/index.tsx @@ -91,6 +91,11 @@ export default { ], defaultValue: 'button' }), + to: createEditorInputProp({ label: '路由跳转' }), + url: createEditorInputProp({ label: '跳转链接' }), + plain: createEditorSwitchProp({ label: '是否为朴素按钮' }), + replace: createEditorSwitchProp({ label: '是否在跳转时替换当前页面历史' }), + round: createEditorSwitchProp({ label: '是否为圆形按钮' }), square: createEditorSwitchProp({ label: '是否为方形按钮' }), block: createEditorSwitchProp({ label: '是否为块级元素', defaultValue: false }), color: createEditorInputProp({ @@ -127,11 +132,6 @@ export default { { label: 'spinner', val: 'spinner' } ], defaultValue: 'circular' - }), - plain: createEditorSwitchProp({ label: '是否为朴素按钮' }), - replace: createEditorSwitchProp({ label: '是否在跳转时替换当前页面历史' }), - round: createEditorSwitchProp({ label: '是否为圆形按钮' }), - to: createEditorInputProp({ label: '路由跳转' }), - url: createEditorInputProp({ label: '跳转链接' }) + }) } } as VisualEditorComponent diff --git a/src/packages/base-widgets/image/index.tsx b/src/packages/base-widgets/image/index.tsx index 1d893f9..e928041 100644 --- a/src/packages/base-widgets/image/index.tsx +++ b/src/packages/base-widgets/image/index.tsx @@ -1,4 +1,9 @@ -import { createEditorInputProp } from '@/visual-editor/visual-editor.props' +import { Image } from 'vant' +import { + createEditorInputProp, + createEditorSelectProp, + createEditorSwitchProp +} from '@/visual-editor/visual-editor.props' import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' export default { @@ -9,16 +14,6 @@ export default { width: true, height: true }, - render: ({ props, size }) => { - return ( -
- -
- ) - }, preview: () => (
@@ -26,7 +21,57 @@ export default {
), + render: ({ props }) => { + return + }, props: { - url: createEditorInputProp({ label: '地址' }) + src: createEditorInputProp({ + label: '图片链接', + defaultValue: 'https://img.yzcdn.cn/vant/cat.jpeg' + }), + width: createEditorInputProp({ label: '宽度，默认单位为 px', defaultValue: 100 }), + height: createEditorInputProp({ label: '高度，默认单位为 px', defaultValue: 100 }), + 'error-icon': createEditorInputProp({ label: '失败时提示的图标名称或图片链接' }), + fit: createEditorSelectProp({ + label: '图片填充模式', + options: [ + { + label: '保持宽高缩放图片，使图片的长边能完全显示出来', + val: 'contain' + }, + { + label: '保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边', + val: 'cover' + }, + { + label: '拉伸图片，使图片填满元素', + val: 'fill' + }, + { + label: '保持图片原有尺寸', + val: 'none' + }, + { + label: '取 none 或 contain 中较小的一个', + val: 'scale-down' + } + ], + defaultValue: 'fill' + }), + 'icon-prefix': createEditorInputProp({ + label: '图标类名前缀', + tips: '图标类名前缀，同 Icon 组件的 class-prefix 属性' + }), + 'icon-size': createEditorInputProp({ label: '加载图标和失败图标的大小' }), + 'lazy-load': createEditorSwitchProp({ + label: '是否开启图片懒加载', + tips: '须配合 Lazyload 组件使用' + }), + 'loading-icon': createEditorInputProp({ label: '加载时提示的图标名称或图片链接' }), + radius: createEditorInputProp({ label: '圆角大小', tips: '默认单位为 px' }), + round: createEditorSwitchProp({ label: '是否显示为圆形' }), + 'show-error': createEditorSwitchProp({ label: '是否展示图片加载失败提示' }), + 'show-loading': createEditorSwitchProp({ label: '是否展示图片加载中提示' }), + alt: createEditorInputProp({ label: '替代文本' }) } } as VisualEditorComponent diff --git a/src/visual-editor/components/right-attribute-panel/MonacoEditor.module.scss b/src/visual-editor/components/common/monaco-editor/MonacoEditor.module.scss similarity index 100% rename from src/visual-editor/components/right-attribute-panel/MonacoEditor.module.scss rename to src/visual-editor/components/common/monaco-editor/MonacoEditor.module.scss diff --git a/src/visual-editor/components/right-attribute-panel/MonacoEditor.tsx b/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx similarity index 86% rename from src/visual-editor/components/right-attribute-panel/MonacoEditor.tsx rename to src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx index 5c42ace..17679e5 100644 --- a/src/visual-editor/components/right-attribute-panel/MonacoEditor.tsx +++ b/src/visual-editor/components/common/monaco-editor/MonacoEditor.tsx @@ -5,7 +5,7 @@ * @description：MonacoEditor * @update: 2021/4/30 0:01 */ -import { Monaco } from '../common/monaco' +import { Monaco } from './monaco' import { defineComponent, onMounted, PropType, shallowRef, ref, onBeforeUnmount, watch } from 'vue' import styles from './MonacoEditor.module.scss' let subscription: Monaco.IDisposable | undefined @@ -15,19 +15,29 @@ export default defineComponent({ name: 'MonacoEditor', props: { code: { + // 代码 type: String as PropType, required: true }, + layout: { + // 布局 + type: Object as PropType, + required: true, + default: () => ({}) + }, + options: { + type: Object as PropType, + default: () => ({}) + }, vid: [String, Number], onChange: { type: Function as PropType< (value: string, event: Monaco.editor.IModelContentChangedEvent) => void - >, - required: true + > }, title: { type: String as PropType, - required: true + default: '' } }, setup(props) { @@ -41,7 +51,7 @@ export default defineComponent({ const formatCode = () => { window.requestIdleCallback( () => { - editorRef.value.getAction('editor.action.formatDocument').run() + editorRef.value!.getAction('editor.action.formatDocument').run() }, { timeout: 800 } ) @@ -49,7 +59,7 @@ export default defineComponent({ onMounted(() => { // 组件初始化时创建一个MonacoEditor的实例 - editorRef.value = Monaco.editor.create(containerDomRef.value, { + editorRef.value = Monaco.editor.create(containerDomRef.value!, { value: props.code, // 初始值 theme: 'vs-dark', // vs, hc-black, or vs-dark language: 'json', // 代码生成语言 @@ -61,21 +71,19 @@ export default defineComponent({ fontFamily: '微软雅黑', //字体 // automaticLayout: true, //编辑器自适应布局，可能会影响性能 overviewRulerBorder: false, - scrollBeyondLastLine: false //滚动配置，溢出才滚动 + scrollBeyondLastLine: false, //滚动配置，溢出才滚动 + ...props.options }) // 如果代码有变化，会在这里监听到，当受到外部数据改变时，不需要触发change事件 subscription = editorRef.value.onDidChangeModelContent((event) => { if (!preventTriggerChangeEvent) { // getValue: 获取编辑器中的所有文本 - props.onChange(editorRef.value.getValue(), event) + props.onChange?.(editorRef.value!.getValue(), event) } }) formatCode() - editorRef.value.layout({ - width: 300, - height: 800 - }) + editorRef.value.layout(props.layout) }) onBeforeUnmount(() => { diff --git a/src/visual-editor/components/common/monaco.ts b/src/visual-editor/components/common/monaco-editor/monaco.ts similarity index 100% rename from src/visual-editor/components/common/monaco.ts rename to src/visual-editor/components/common/monaco-editor/monaco.ts diff --git a/src/visual-editor/components/header/comp-render.tsx b/src/visual-editor/components/header/comp-render.tsx deleted file mode 100644 index 289b7d2..0000000 --- a/src/visual-editor/components/header/comp-render.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { defineComponent } from 'vue' - -export default defineComponent({ - name: 'CompRender', - props: { - element: { - type: Object, - default: () => ({}) - }, - config: { - type: Object, - default: () => ({}) - } - }, - setup(props) { - return () => { - const component = props.config.componentMap[props.element.componentKey] - return component.render({ - size: {}, - props: props.element.props || {}, - model: {}, - block: props.element, - custom: {} - }) - } - } -}) diff --git a/src/visual-editor/components/header/index.vue b/src/visual-editor/components/header/index.vue index 6a13f17..7352299 100644 --- a/src/visual-editor/components/header/index.vue +++ b/src/visual-editor/components/header/index.vue @@ -1,12 +1,27 @@