增加默认数据的解析

src/views/tempaltes/editMenu.vue

@@ -26,7 +26,12 @@
           />
           <div class="checkbox">
             <label v-if="item.enableDisplay">
-              <input type="checkbox" style="display: inline;" v-model="schemaData[item.dataKey].visbility" @change="checkboxChange" />是否隐藏
+              <input
+                type="checkbox"
+                style="display: inline;"
+                v-model="schemaData[item.dataKey].visbility"
+                @change="checkboxChange"
+              />是否隐藏
             </label>
           </div>
           <input
@@ -80,7 +85,10 @@
                 </div>
               </div>
             </div>
-            <div class="create-btn-container" v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)">
+            <div
+              class="create-btn-container"
+              v-if="!item.listLimit || (item.listLimit && schemaData[item.dataKey].length < !item.listLimit)"
+            >
               <van-button class="create-btn" type="info" @click="addItem(item)">添加</van-button>
             </div>
           </div>
@@ -92,18 +100,20 @@
             :after-read="uploadAfter"
           >
             <van-button icon="photo" type="info">上传</van-button>
-            <br>
+            <br />
           </van-uploader>
-          <van-button type="info" v-if="!item.selectList" @click="setSelectData(item)">选择默认数据</van-button>
+          <van-button type="info" v-if="item.selectList && item.type !== 'list'" @click="setSelectData(item, index)">选择默认数据</van-button>
         </div>
       </van-collapse-item>
     </van-collapse>
+    <selectDataCom :selectList="selectData" @changeSelcetData="changeSelcetData" v-if="selectData.show"></selectDataCom>
   </div>
 </template>
 
 <script>
 import { upload } from "@/api/api";
 import { getHostUrl } from "@/utils/index";
+import selectDataCom from "./selectData";
 export default {
   name: "editMenu",
   props: {
@@ -120,6 +130,9 @@ export default {
       default: () => {}
     }
   },
+  components: {
+    selectDataCom
+  },
   created() {
     console.log(this.schemaData);
   },
@@ -129,7 +142,9 @@ export default {
       dataKey: "",
       listIndex: "",
       itemKey: "",
-      selectData:{}
+      selectData: {
+        show: false
+      }
     };
   },
   methods: {
@@ -148,7 +163,7 @@ export default {
       console.log(key, index, itemKey, "dsadadsa");
     },
     isSchemaIndex(item) {
-      console.log(item);
+      // console.log(item);
       return item["schemaIndex"] ? item["schemaIndex"] : 0;
     },
     toObj(obj) {
@@ -194,7 +209,7 @@ export default {
         });
     },
     checkboxChange(value) {
-      console.log( this.schemaData, value)
+      console.log(this.schemaData, value);
     },
     setSchemaData(value) {
       this.schemaData[this.dataKey].value = value;
@@ -209,8 +224,25 @@ export default {
       arr.splice(index, 1);
       this.$emit("setList", this.schemaData);
     },
-    setSelectData(item) {
-      this.selectData = item
+    setSelectData(item, index) {
+      const myItem = JSON.parse(JSON.stringify(item))
+      this.selectData.show = true;
+      this.selectData.item = myItem;
+
+      this.selectData.index = index;
+      this.selectData.item.selectList = [
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg",
+        "http://pic27.nipic.com/20130313/9252150_092049419327_2.jpg"
+      ];
+      console.log(this.selectData)
+    },
+    changeSelcetData(data) {
+      console.log(data);
+      this.dataKey = data.item.dataKey
+      this.setSchemaData(data.val)
+      this.selectData.show = false
     }
   }
 };

src/views/tempaltes/selectData.vue

 <template>
-  <div>
-    adsdsa
+  <div v-if="selectList.item && selectList.show">
+    <van-popup
+      v-model="selectList.show"
+      position="bottom"
+      :style="{ height: '300px' }"
+      v-if="selectList.item"
+    >
+      <div class="select-container" v-if="selectList.item.type === 'image'">
+        <img
+          class="selectImage"
+          v-for="(image, index) in selectList.item.selectList"
+          :key="index"
+          :src="image"
+          alt
+          @click="ItemClick(image)"
+        />
+      </div>
+      <div class="select-container" v-if="selectList.item.type === 'video'">
+        <video
+          class="selectVideo"
+          v-for="(image, index) in selectList.item.selectList"
+          :key="index"
+          :src="image"
+          alt
+          @click="ItemClick(image)"
+        ></video>
+      </div>
+      <div class="select-container" v-if="selectList.item.type === 'text'">
+        <div
+          class="selectText"
+          v-for="(image, index) in selectList.item.selectList"
+          :key="index"
+          :src="image"
+          @click="ItemClick(image)"
+        >{{image}}</div>
+      </div>
+    </van-popup>
   </div>
 </template>
 <script>
-
 export default {
   data() {
     return {
-
+      show: false
+    };
+  },
+  created() {
+    // console.log(this.selectList);
+  },
+  methods: {
+    ItemClick(val) {
+      this.$emit('changeSelcetData', {
+        val,
+        index: this.selectList.index,
+        item: this.selectList.item
+      } )
     }
   },
-  props: ['selectList'],
-  
-}
+  props: ["selectList"],
+  watch: {
+    selectList: function(val) {
+      console.log(val);
+    }
+  }
+};
 </script>
-<style lang="scc" scoped>
-
+<style lang="scss" scoped>
+.select-container {
+  // overflow: hidden;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 20px;
+  // display: flex;
+  .selectImage {
+    display: inline-block;
+    // height: calc(100% - 20px);
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .selectVideo {
+    display: inline-block;
+    // height: calc(100% - 20px);
+    width: 100%;
+    margin-bottom: 30px;
+  }
+  .selectText {
+    display: block;
+    word-break: break-all;
+    // height: calc(100% - 20px);
+    width: 100%;
+    margin-bottom: 30px;
+  }
+}
 </style>
\ No newline at end of file