chore(vue editor): 添加多图板块 2-3 演示

Author: lljj-x

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

@@ -524,7 +524,7 @@
                 position: absolute;
                 top: 0;
                 right: 0;
-                font-size: 26px;
+                font-size: 22px;
                 padding: 10px;
                 background: rgba(0,0,0,0.8);
                 color: #FFFFFF;

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

@@ -197,7 +197,7 @@
     }
     .form {
         padding: 10px 0;
-        max-height: calc(100vh - 160px);
+        max-height: calc(100vh - 200px);
         overflow: auto;
         &::-webkit-scrollbar {
             width: 0;

packages/demo/src/vue-editor/views/editor/config/defaultItems.js

@@ -84,8 +84,36 @@ export default [
         }
     },
     {
-        // 默认显示一个多图模块
-        name: 'MultipleImg3'
+        name: 'Text',
+        value: {
+            txt: '超值进口新发现',
+            txtColor: '#487cff'
+        }
+    },
+    {
+        name: 'MultipleImg2_3',
+        value: {
+            imgItem1_1: {
+                imgUrl: 'https://img.alicdn.com/tps/i4/TB1fbhiawoQMeJjy0FnSuv8gFXa.jpg_490x490q100.jpg_.webp',
+                imgLink: 'https://www.jd.com/'
+            },
+            imgItem1_2: {
+                imgUrl: 'https://gw.alicdn.com/tfs/TB1UzOqoWL7gK0jSZFBXXXZZpXa-468-602.jpg',
+                imgLink: 'https://www.jd.com/'
+            },
+            imgItem2_1: {
+                imgUrl: 'https://img.alicdn.com/tfs/TB1XjMYnfb2gK0jSZK9XXaEgFXa-468-1236.jpg',
+                imgLink: 'https://www.jd.com/'
+            },
+            imgItem2_2: {
+                imgUrl: 'https://gw.alicdn.com/tfs/TB1s720BxD1gK0jSZFyXXciOVXa-468-1236.jpg',
+                imgLink: 'https://www.jd.com/'
+            },
+            imgItem2_3: {
+                imgUrl: 'https://gw.alicdn.com/tfs/TB1xVR9oFP7gK0jSZFjXXc5aXXa-468-602.jpg',
+                imgLink: 'https://www.jd.com/'
+            }
+        }
     },
     {
         // 默认显示所有商品

packages/demo/src/vue-editor/views/editor/config/tools.js

@@ -5,17 +5,17 @@
 // 轮播图
 import * as componentPackCarouselImg from '../viewComponents/CarouselImg';
 
-// 多图模块 3
-import * as componentPackMultipleImg3 from '../viewComponents/MultipleImg3';
-
-// 多图模块 3
-import * as componentPackMultipleImg5 from '../viewComponents/MultipleImg5';
+// 秒杀商品
+import * as componentPackFlashSaleGoodsList from '../viewComponents/FlashSaleGoodsList';
 
 // 纯文本
 import * as componentPackText from '../viewComponents/Text';
 
-// 纯文本
-import * as componentPackFlashSaleGoodsList from '../viewComponents/FlashSaleGoodsList';
+// 多图模块一排5个
+import * as componentPackMultipleImg5 from '../viewComponents/MultipleImg5';
+
+// 多图模块 2-3
+import * as componentPackMultipleImg23 from '../viewComponents/MultipleImg2_3';
 
 // 推荐
 import * as componentPackRecommendedGoodsList from '../viewComponents/RecommendedGoodsList';
@@ -55,10 +55,10 @@ const tools = [
             icon: 'el-icon-picture',
             componentPack: componentPackMultipleImg5
         }, {
-            title: '多图(2-3))',
+            title: '多图(2-3)',
             maxNum: 10,
             icon: 'el-icon-s-grid',
-            componentPack: componentPackMultipleImg3
+            componentPack: componentPackMultipleImg23
         }, {
             title: '纯文本',
             maxNum: 20,

packages/demo/src/vue-editor/views/editor/fieldComponents/linkImgField/LinkImgField.vue

@@ -32,9 +32,6 @@
             :required="elItemRequired"
         >
             <div v-if="selectProps.description" :class="$style.description" v-html="selectProps.description"></div>
-            <div v-if="fieldProps">
-                {{ fieldProps }}
-            </div>
             <div :class="$style.formItem">
                 <div :class="$style.uploadBox" @click="selectImg">
                     <img v-if="imgUrl" :src="imgUrl" alt="" style="max-width: 100%;max-height: 100%;">
@@ -137,6 +134,11 @@
                     'https://img.alicdn.com/tps/i4/TB1ZJtFOAL0gK0jSZFAwu3A9pXa.png_500x1000q75.jpg_.webp',
                     'https://img.alicdn.com/tps/i4/TB1y4tuOxz1gK0jSZSgSuuvwpXa.jpg_500x1000q75s0.jpg_.webp',
                     'https://img.alicdn.com/tps/i4/TB1y4tuOxz1gK0jSZSgSuuvwpXa.jpg_500x1000q75s0.jpg_.webp',
+                    'https://img.alicdn.com/tps/i4/TB1fbhiawoQMeJjy0FnSuv8gFXa.jpg_490x490q100.jpg_.webp',
+                    'https://gw.alicdn.com/tfs/TB1UzOqoWL7gK0jSZFBXXXZZpXa-468-602.jpg',
+                    'https://img.alicdn.com/tfs/TB1XjMYnfb2gK0jSZK9XXaEgFXa-468-1236.jpg',
+                    'https://img.alicdn.com/tps/i4/TB1MesKcWmWQ1JjSZPhwu0CJFXa.png',
+                    'https://gw.alicdn.com/tfs/TB1xVR9oFP7gK0jSZFjXXc5aXXa-468-602.jpg'
                 ];
                 this.$message.success('选择图片成功，这里随机一个图片');
                 this.imgUrl = imgs[Math.floor(Math.random() * imgs.length)];