食谱编辑交互

stdiet-ui/src/components/AutoHideInfo/index.vue

@@ -3,9 +3,14 @@
     <div v-for="item in mData" :key="item">
       {{ item }}
     </div>
-    <div v-if="data.length > 3">
-      <div>...</div>
-      <el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
+    <div v-if="data.length > line">
+      <div v-if="line > 0">...</div>
+      <el-popover
+        placement="top-start"
+        width="200"
+        popper-class="autohideinfo_detial"
+        trigger="hover"
+      >
         <div v-for="item in data" :key="item">{{ item }}</div>
         <el-button type="text" slot="reference">详情</el-button>
       </el-popover>
@@ -14,37 +19,39 @@
 </template>
 
 <script>
-  export default {
-    name: "AutoHideInfo",
-    data() {
-      return {
-      };
+export default {
+  name: "AutoHideInfo",
+  data() {
+    return {};
+  },
+  props: {
+    data: {
+      type: Array,
+      default: "",
+      // required: true,
     },
-    props: {
-      data: {
-        type: Array,
-        default: '',
-        // required: true,
-      },
+    line: {
+      type: Number,
+      default: 3,
     },
-    computed: {
-      mData: function () {
-        if (this.data instanceof Array) {
-          return this.data.slice(0, 3);
-        }
-        return [];
-      },
+  },
+  computed: {
+    mData: function () {
+      if (this.data instanceof Array) {
+        return this.data.slice(0, this.line);
+      }
+      return [];
     },
-  };
+  },
+};
 </script>
 
 <style scoped>
-  .autohideinfo_wrapper {
+.autohideinfo_wrapper {
+}
 
-  }
-
-  .autohideinfo_detial {
-    max-height: 240px;
-    overflow: auto;
-  }
+.autohideinfo_detial {
+  max-height: 240px;
+  overflow: auto;
+}
 </style>