chore(vue editor): 更新vue editor 预览样式

Author: lljj-x

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

@@ -106,7 +106,7 @@ export default ({
             return h('el-dialog', {
                 on: {
                     ...this.curDialogListeners,
-                    'update:visible': function (val) {
+                    'update:visible': function update(val) {
                         self.visible = val;
                     }
                 },

packages/demo/src/vue-editor/router/guards.js

@@ -1,13 +1,4 @@
-// import beSyncUserState from './guardsModule/beforeEachSyncUserState.js';
-// import bePublishSave from './guardsModule/beforeEachPublishSave.js';
-// import beRedirect from './guardsModule/beforeEachRedirect.js';
-
-// 顺序执行
-const beListConfig = [
-    // beSyncUserState, // 新开标签页时，同步用户状态信息
-    // bePublishSave, // 发布保存提示框
-    // beRedirect // 分析用户状态，重定向落地页
-];
+const beListConfig = [];
 
 // 路由守卫
 export default function guards(router) {
@@ -43,7 +34,7 @@ export default function guards(router) {
 
     // after each 不用改变路由行为，不采用上述模式
     router.afterEach((to, from) => {
-        const baseTitle = 'Demo';
+        const baseTitle = 'vue-json-schema-form';
         document.title = to.meta.title ? `${to.meta.title} | ${baseTitle}` : baseTitle;
     });
 }

packages/demo/src/vue-editor/router/guardsModule/beforeEachPublishSave.js

@@ -3,7 +3,7 @@ const routes = [
         path: '/editor',
         name: 'editor',
         meta: {
-            title: 'editor'
+            title: 'Vue Editor'
         },
         component: () => import('../../views/editor/Editor.vue'),
     },

packages/demo/src/vue-editor/router/guardsModule/beforeEachRedirect.js

@@ -1,23 +1,28 @@
 <template>
-    <div v-loading="loading" :class="$style.box">
+    <div v-loading="loading" :class="{
+        [$style.box]: true,
+        [$style.previewBox]: isPreview
+    }"
+    >
         <transition name="el-zoom-in-top">
             <EditorHeader
                 v-if="!isPreview"
                 v-model="scale"
                 @onUpdateScale="fixComponentFormPosition"
-                @onPreview="handlePreview"
+                @onPreview="(scale = 100) && (isPreview = true)"
                 @onSave="handleSave"
                 @onPublish="handlePublish"
             ></EditorHeader>
             <el-button
                 v-else
                 type="primary"
                 style="position: fixed;right: 20px;top: 20px;z-index: 5;"
-                @click="isPreview = false;"
+                @click="(scale = 65) && (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>
@@ -30,6 +35,7 @@
                 >
                 </EditorToolBar>
             </div>
+
             <div ref="domScrollWrap" :class="$style.contentWrap">
                 <div :class="[$style.contentBox]">
                     <div :class="$style.dragAreaWrap" :style="{transform: `scale(${scale/100})`}">
@@ -135,18 +141,6 @@
         },
         data() {
             return {
-                dragOptions: {
-                    animation: 300,
-                    group: 'listComponentsGroup',
-                    disabled: false,
-                    ghostClass: this.$style.ghost,
-                    filter: this.$style.disabled,
-                    draggable: '.draggableItem',
-                    tag: 'div',
-                    swapThreshold: 0.3,
-                    // forceFallback: true
-                    // fallbackTolerance: 0
-                },
                 loading: false,
                 isPreview: false,
                 scale: 65,
@@ -158,6 +152,20 @@
         },
 
         computed: {
+            dragOptions() {
+                return {
+                    animation: 300,
+                    group: 'listComponentsGroup',
+                    disabled: this.isPreview,
+                    ghostClass: this.$style.ghost,
+                    filter: this.$style.disabled,
+                    draggable: '.draggableItem',
+                    tag: 'div',
+                    swapThreshold: 0.3,
+                    // forceFallback: true
+                    // fallbackTolerance: 0
+                };
+            },
             // 头部、中间、底部各个list集合
             componentListGroup() {
                 return [this.editHeaderComponentList, this.editComponentList, this.editFooterComponentList];
@@ -256,10 +264,6 @@
                     }
                 });
             },
-            handlePreview() {
-                this.isPreview = true;
-                this.dragOptions.disabled = true;
-            },
             handlePublish() {
                 this.handleSave(true);
             },
@@ -416,7 +420,35 @@
         --tool-bar-width: 320px;
         --drag-area-width: 1920px;
     }
+    /*预览模式 同步样式重置*/
+    .previewBox {
+        .toolsBar,.leftCaret {
+            display: none;
+        }
+        .container {
+            height: 100vh;
+            padding-left: 0;
+        }
+        .contentWrap {
+            overflow-x: hidden;
+        }
+        .contentBox, .dragAreaWrap{
+            width: auto;
+        }
+        :global {
+            .vueEditor_viewComponentBox {
+                margin-left: 50%;
+                transform: translate(-50%, 0);
+                cursor: auto;
+                box-shadow: none;
+                &:hover, &:active{
+                    box-shadow: none;
+                }
+            }
+        }
+    }
     .container {
+        position: relative;
         box-sizing: border-box;
         padding-left: 0;
         padding-top: 10px;
@@ -440,7 +472,7 @@
         height: 50px;
         background: var(--color-white);
         top: 50%;
-        margin-top: -15px;
+        margin-top: -25px;
         box-shadow: 0 0 4px 0 color(var(--color-black) a(0.1));
         transition: all ease 0.3s;
         border-radius: 0 10px 10px 0;
@@ -451,9 +483,9 @@
         }
     }
     .toolsBar {
-        position: fixed;
+        position: absolute;
         left: 0;
-        top: var(--site-top-height);
+        top: 10px;
         bottom: 0;
         background: var(--color-white);
         width: var(--tool-bar-width);
@@ -486,7 +518,7 @@
     .contentBox {
         position: relative;
         width: 2600px;
-        height: 100%;
+        min-height: 100%;
     }
     .dragAreaWrap {
         transform-origin: top center;
@@ -534,15 +566,6 @@
                     }
                 }
             }
-            .module-name-tip {
-                position: absolute;
-                top: 0;
-                right: 0;
-                font-size: 22px;
-                padding: 10px;
-                background: rgba(0,0,0,0.8);
-                color: #FFFFFF;
-            }
             .emptyBox {
                 min-height: 350px;
                 display: flex;

packages/demo/src/vue-editor/router/guardsModule/beforeEachSyncUserState.js

@@ -50,8 +50,9 @@
         position: absolute;
         top: 0;
         right: 0;
-        font-size: 22px;
-        padding: 10px;
+        font-size: 16px;
+        padding: 8px 15px;
+        border-radius: 4px;
         background: rgba(0,0,0,0.8);
         color: #FFFFFF;
         z-index: 3;

packages/demo/src/vue-editor/router/routes/index.js

@@ -5,6 +5,7 @@
         :visible-arrow="false"
         :popper-class="$style.editFormpopper"
         placement="right-start"
+        :disabled="isPreview"
         width="400"
         class="js_viewComponentWrap viewComponentWrap"
         style="display: block;"
@@ -59,7 +60,8 @@
              :class="{
                  [$style.viewBox]: true,
                  [$style.active]: editorItem.isEdit,
-                 js_viewComponentBox: true
+                 js_viewComponentBox: true,
+                 vueEditor_viewComponentBox: true,
              }"
              :style="{
                  width: editorItem.viewWidth || '1190px'

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

@@ -6,8 +6,9 @@
                 height="420px"
             >
                 <el-carousel-item v-for="(item, index) in formData.imgList" :key="index" height="400px">
-                    <a :class="$style.imgitem" :href="item.imgLink">
+                    <a :class="$style.imgitem" :href="item.imgLink" target="_blank">
                         <el-image
+                            class="hover-animation"
                             :class="$style.imgitem_img"
                             :src="item.imgUrl"
                             :style="{