chore(vue editor): 更新vue editor

Author: lljj-x

packages/demo/src/_common/components/component-with-dialog/index.js

@@ -101,16 +101,26 @@ export default ({
                 this.$el.parentElement.removeChild(this.$el);
             }
         },
-        template: `
-            <el-dialog
-                v-bind="curDialogProps"
-                v-on="curDialogListeners"
-                :visible.sync="visible">
-               <VueComponent v-bind="componentProps"
-                             v-on="componentListeners"
-               ></VueComponent>
-            </el-dialog>
-        `,
+        render(h) {
+            const self = this;
+            return h('el-dialog', {
+                on: {
+                    ...this.curDialogListeners,
+                    'update:visible': function (val) {
+                        self.visible = val;
+                    }
+                },
+                props: {
+                    visible: this.visible,
+                    ...this.curDialogProps,
+                },
+            }, [
+                h(VueComponent, {
+                    on: this.componentListeners,
+                    props: this.componentProps,
+                })
+            ]);
+        },
     });
 
     const componentDialog = (new DialogComponentConstructor({

packages/demo/src/vue-editor/views/editor/Editor.vue

@@ -1,12 +1,23 @@
 <template>
     <div v-loading="loading" :class="$style.box">
-        <EditorHeader
-            v-model="scale"
-            @onUpdateScale="fixComponentFormPosition"
-            @onPreview="handlePreview"
-            @onSave="handleSave"
-            @onPublish="handlePublish"
-        ></EditorHeader>
+        <transition name="el-zoom-in-top">
+            <EditorHeader
+                v-if="!isPreview"
+                v-model="scale"
+                @onUpdateScale="fixComponentFormPosition"
+                @onPreview="handlePreview"
+                @onSave="handleSave"
+                @onPublish="handlePublish"
+            ></EditorHeader>
+            <el-button
+                v-else
+                type="primary"
+                style="position: fixed;right: 20px;top: 20px;z-index: 5;"
+                @click="isPreview = false;"
+            >
+                结束预览
+            </el-button>
+        </transition>
         <div :class="[$style.container, showToolBar ? $style.hasTools : '']">
             <span :class="$style.leftCaret" @click="showToolBar = !showToolBar">
                 <i class="el-icon-caret-right"></i>
@@ -41,6 +52,7 @@
                             >
                                 <ViewComponentWrap
                                     :editor-item="item"
+                                    :is-preview="isPreview"
                                     @onOperate="handleItemOperate"
                                 >
                                     <!-- 传入form使用传入的form组件 -->
@@ -55,7 +67,7 @@
                                     >
                                     </component>
 
-                                    <!-- 不传入使用 schema生成form -->
+                                    <!-- schema生成form -->
                                     <VueElementForm
                                         v-else
                                         slot="componentForm"
@@ -78,7 +90,6 @@
                                 </ViewComponentWrap>
                             </div>
                         </draggable>
-
                         <div v-if="trueComponentList.length === 0" :class="$style.tipBox">
                             <img src="./assets/img/empty-tip.png" alt="empty-img">
                             <p>左边选择模块拖入该区域</p>
@@ -137,12 +148,12 @@
                     // fallbackTolerance: 0
                 },
                 loading: false,
+                isPreview: false,
                 scale: 65,
                 editComponentList: [],
                 editHeaderComponentList: [], // 兼容header slot ，插件内部实现导致必须分割多分数据
                 editFooterComponentList: [], // 兼容footer slot ，插件内部实现导致必须分割多分数据
                 showToolBar: true,
-                // defaultDragWidth: 1920,
             };
         },
 
@@ -200,6 +211,7 @@
                 for (let i = 0; i < this.trueComponentList.length; i += 1) {
                     const item = this.trueComponentList[i];
                     if (!schemaValidate.isValid(item.componentPack.propsSchema, item.componentValue)) {
+                        debugger;
                         // 验证失败
                         // item.isEdit = true; // 打开编辑窗口
 
@@ -231,12 +243,8 @@
                     }
                 });
             },
-            handleSave() {
-                this.handlePreview();
-            },
-            handlePreview() {
-                // schema validate
-                if (!this.validateDataList()) return;
+            handleSave(validData) {
+                if (!this.validateDataList(validData)) return;
 
                 componentWithDialog({
                     VueComponent: JsonPerttyPrint,
@@ -248,8 +256,12 @@
                     }
                 });
             },
+            handlePreview() {
+                this.isPreview = true;
+                this.dragOptions.disabled = true;
+            },
             handlePublish() {
-                this.handlePreview();
+                this.handleSave(true);
             },
             // 计算各个组件状态栏按钮状态
             computedComponentToolBarStatus() {

packages/demo/src/vue-editor/views/editor/components/ViewComponentWrap.vue

@@ -75,6 +75,10 @@
     export default {
         name: 'ViewComponentWrap',
         props: {
+            isPreview: {
+                type: Boolean,
+                default: false
+            },
             editorItem: {
                 type: Object,
                 default: () => ({})
@@ -86,9 +90,10 @@
         methods: {
             // 点击只能打开，并且打开状态下只能执行一次
             handelClickView(e) {
-                // 阻止浏览器默认时间
-                e.preventDefault();
-
+                if (!this.isPreview) {
+                    // 阻止浏览器默认事件
+                    e.preventDefault();
+                }
                 if (!this.editorItem.isEdit) this.showEditForm();
             },
 

packages/demo/src/vue-editor/views/editor/viewComponents/FlashSaleGoodsList/schema.json

@@ -44,8 +44,7 @@
         }
     },
     "required": [
-        "startTime",
-        "goodsTitle"
+        "startTime"
     ],
     "additionalProperties": false
 }

packages/demo/src/vue-editor/views/editor/viewComponents/Text/propsSchema.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "http://json-schema.org/draft-06/schema#",
+    "$schema": "http://json-schema.org/draft-07/schema#",
     "id": "Text",
     "title": "单文本输入组件",
     "description":"单文本输入组件，用于在页面配置一条文字信息" ,