update

src/components/detail-content-expand/index.vue

@@ -1,102 +1,97 @@
 <template>
     <div class="detail-content-expand">
-       <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
+        <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{ height: (show ? contentHeight : defaultContentHeight) + 'px' }">
             <div ref="content" class="ref-content">
                 <slot></slot>
             </div>
         </div>
         <span class="expand" v-if="contentOverflow" @click="toggle">
             <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
-            <span class="label">{{show ? '收起全文': '展开全文'}}</span>
+            <span class="label">{{ show ? "收起全文" : "展开全文" }}</span>
         </span>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'detail-content-expand',
+    name: "detail-content-expand",
     props: {
         selector: {
             type: String,
-            default: '.goods-content'
-        }
+            default: ".goods-content",
+        },
     },
-    data(){
+    data() {
         return {
             wrapperHeight: 0,
             contentHeight: 0,
             show: false,
             wrapperContainerHeight: 0,
-            defaultContentHeight: 0
-        }
+            defaultContentHeight: 0,
+        };
     },
     computed: {
         contentOverflow: {
-            get(){
+            get() {
                 return this.contentHeight > this.wrapperHeight;
-            }
-        }
+            },
+        },
     },
-    watch: {
-        '$slots'(val){
-            console.log('slots val',val)
-        }
-    },
-    mounted(){
-        this.wrapperHeight = this.$refs.wrapper.offsetHeight
+
+    mounted() {
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight;
         this.$nextTick(() => {
-            this.contentHeight = this.$refs.content.offsetHeight
+            this.contentHeight = this.$refs.content.offsetHeight;
             this.wrapperContainerHeight = this.wrapperHeight;
             this.refresh();
-        })
+        });
     },
     methods: {
-        toggle(){
-            this.show = !this.show
+        toggle() {
+            this.show = !this.show;
         },
-        refresh(){
+        refresh() {
             const selector = this.$refs.content.querySelector(this.selector);
-            if(!selector) {
+            if (!selector) {
                 this.defaultContentHeight = 100;
-                return
+                return;
             }
-            this.defaultContentHeight = selector.offsetHeight / (4/1)
-        }
-    }
-}
+            this.defaultContentHeight = selector.offsetHeight / (4 / 1);
+        },
+    },
+};
 </script>
 
 <style lang="scss">
-.detail-content-expand{
-    .content{
+.detail-content-expand {
+    .content {
         line-height: 1.4;
-        font-size: .35rem;
+        font-size: 0.35rem;
         color: #888;
         letter-spacing: 1px;
         text-align: justify;
-        margin-top: .3rem;
+        margin-top: 0.3rem;
         overflow: hidden;
         height: 4em;
-        transition: height .3s linear;
+        transition: height 0.3s linear;
     }
-    .expand{
+    .expand {
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 1.07rem;
         color: #888;
-        .iconfont{
+        .iconfont {
             display: inline-block;
-            
         }
-        .iconfont-expand{
+        .iconfont-expand {
             transform: rotateZ(180deg);
         }
-        .label{
-            padding-left: .1rem;
-            font-size: .35rem;
+        .label {
+            padding-left: 0.1rem;
+            font-size: 0.35rem;
         }
     }
 }
-</style>
+</style>