98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<div class="detail-content-expand">
|
|
<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>
|
|
</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;
|
|
},
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
|
this.$nextTick(() => {
|
|
this.contentHeight = this.$refs.content.offsetHeight;
|
|
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;
|
|
}
|
|
this.defaultContentHeight = selector.offsetHeight / (4 / 1);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.detail-content-expand {
|
|
.content {
|
|
line-height: 1.4;
|
|
font-size: 0.35rem;
|
|
color: #888;
|
|
letter-spacing: 1px;
|
|
text-align: justify;
|
|
margin-top: 0.3rem;
|
|
overflow: hidden;
|
|
height: 4em;
|
|
transition: height 0.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: 0.1rem;
|
|
font-size: 0.35rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|