寺庙列表加载功能多

2022-03-30 13:31:00 +08:00
parent 2f4bd26b22
commit 804efb793b
9 changed files with 147 additions and 13 deletions
@@ -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>