自定义列表组件注释

src/components/custom-list/index.vue

+<template>
+  <!-- 自定义列表 -->
+  <div class="customList" :style="{'padding':padding+'px','margin': margin+'px','border-radius': borderRadius + 'px','background':backgroundColor}">
+    <div v-for="(item,index) in 4" :key="index" @click="itemClick(item,index)">
+      <rich-text :nodes="comStr"></rich-text>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+function compiler(str, data) {
+  //正则表达式  .+匹配{{}}所有字符 ？取消贪婪  g全局
+  let regulation = /\{\{(.+?)\}\}/g;
+  str = str.replace(regulation, function (_, val) {
+    let key = val.trim();
+    //调用 对象嵌套函数
+    let value = data[key];
+    return value;
+  });
+  return str;
+}
+import Vue from "vue";
+export default {
+  name: "custom-list",
+  props: {
+    render: {
+      type: Boolean,
+      default: false,
+    },
+    datas: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed:{
+    comStr(){
+      return compiler(this.datas.componentData.comStr,this.datas.componentData.comData);
+    },
+    padding() {
+      return this.datas.componentData.padding;
+    },
+    margin() {
+      return this.datas.componentData.margin;
+    },
+    borderRadius() {
+      return this.datas.componentData.borderRadius;
+    },
+    backgroundColor() {
+      return this.datas.componentData.backgroundColor;
+    },
+  },
+  created() {},
+  mounted() {},
+  methods:{
+    itemClick(item,index){
+      eval(this.datas.componentData.comMethods)
+    }
+  },
+  components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.customList {
+}
+</style>

src/pages/home/index.vue

@@ -93,6 +93,9 @@
           <div v-if="item.componentCode == 'wo-timeout' && item.componentInfo.visible == 1">
 			      <wo-timeout :datas="item"></wo-timeout>
           </div>
+          <!-- <div v-if="item.componentCode == 'custom-list' && item.componentInfo.visible == 1">
+			      <custom-list :datas="item"></custom-list>
+          </div> -->
 
         </div>
         <bottomCont></bottomCont>
@@ -145,6 +148,7 @@ import birth from '@/api/popup'
 import couponPopup from '@/components/couponPopup.vue'
 import NewUser from "../../components/newCustomer/newUser";
 import NewPolite from "../../components/newCustomer/newPolite";
+import customList from "../../components/custom-list";
 import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } from "../../utils/mayi.js";
 import indexApi from "@/api/index.js";
 import { throttle, concatUrl } from "../../utils/index.js"
@@ -200,7 +204,8 @@ export default {
     NewPolite,
     birthPopup,
     mpvueCropper,
-    woTimeout
+    woTimeout,
+    'custom-list':customList
   },
   onShareAppMessage(res) {
     let {shopCode} = app.globalData.shopInfo;