寺庙列表加载功能多

src/components/content-expand/index.vue

@@ -1,12 +1,13 @@
 <template>
     <div class="content-expand">
-       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 50) + 'px'}">
+       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 100) + 'px'}">
             <div 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>
     </div>
 </template>
@@ -19,7 +20,8 @@ export default {
             wrapperHeight: 0,
             contentHeight: 0,
             show: false,
-            wrapperContainerHeight: 0
+            wrapperContainerHeight: 0,
+            defaultContentHeight: 0
         }
     },
     computed: {
@@ -28,10 +30,15 @@ export default {
                 return this.contentHeight > this.wrapperHeight;
             }
         }
+    },
+    updated() {
+
     },
     mounted(){
         this.wrapperHeight = this.$refs.wrapper.offsetHeight
         this.contentHeight = this.$refs.content.offsetHeight
+        this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
+        console.log(this.defaultContentHeight)
         this.$nextTick(() => {
             this.wrapperContainerHeight = this.wrapperHeight;
         })
@@ -71,6 +78,10 @@ export default {
         .iconfont-expand{
             transform: rotateZ(180deg);
         }
+        .label{
+            padding-left: .1rem;
+            font-size: .35rem;
+        }
     }
 }
 </style>

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

@@ -0,0 +1,101 @@
+<template>
+    <div class="detail-content-expand">
+       <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
+            <div 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>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'detail-content-expand',
+    props: {
+        selector: {
+            type: String,
+            default: '.goods-content'
+        }
+    },
+    data(){
+        return {
+            wrapperHeight: 0,
+            contentHeight: 0,
+            show: false,
+            wrapperContainerHeight: 0,
+            defaultContentHeight: 0
+        }
+    },
+    computed: {
+        contentOverflow: {
+            get(){
+                return this.contentHeight > this.wrapperHeight;
+            }
+        }
+    },
+    updated() {
+
+    },
+    mounted(){
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight
+        this.contentHeight = this.$refs.content.offsetHeight
+        this.$nextTick(() => {
+            this.wrapperContainerHeight = this.wrapperHeight;
+            this.refresh();
+        })
+    },
+    methods: {
+        toggle(){
+            this.show = !this.show
+        },
+        refresh(){
+            const selector = this.$refs.content.querySelector(this.selector);
+            if(!selector) {
+                this.defaultContentHeight = 100;
+                return
+            }
+            console.log('selector', selector)
+            this.defaultContentHeight = selector.offsetHeight / (4/1)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.detail-content-expand{
+    .content{
+        line-height: 1.4;
+        font-size: .35rem;
+        color: #888;
+        letter-spacing: 1px;
+        text-align: justify;
+        margin-top: .3rem;
+        overflow: hidden;
+        height: 4em;
+        transition: height .3s linear;
+    }
+    .expand{
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 1.07rem;
+        color: #888;
+        .iconfont{
+            display: inline-block;
+            
+        }
+        .iconfont-expand{
+            transform: rotateZ(180deg);
+        }
+        .label{
+            padding-left: .1rem;
+            font-size: .35rem;
+        }
+    }
+}
+</style>

src/components/index.js

@@ -8,6 +8,7 @@ import Order from './order';
 import ScrollView from './scroll-view'
 import Uploader from './uploader'
 import ContentExpand from './content-expand'
+import detailContentExpand from './detail-content-expand'
 import UserDynamic from './user-dynamic';
 import RandomMoney from './random-money'
 import ThankGiving from './Thanksgiving'
@@ -27,6 +28,7 @@ Vue.component(Order.name, Order)
 Vue.component(ScrollView.name, ScrollView)
 Vue.component(Uploader.name, Uploader)
 Vue.component(ContentExpand.name, ContentExpand)
+Vue.component(detailContentExpand.name, detailContentExpand)
 Vue.component(UserDynamic.name, UserDynamic)
 Vue.component(RandomMoney.name, RandomMoney)
 Vue.component(ThankGiving.name, ThankGiving)