sgCollapseText
<template><!-- 展开or折叠文本 --><div :class="$options.name"><div class="text" ref="text" :expand="expand" @mouseover="judgeShowBt"><slot v-if="$slots.default" /><div v-else v-html="text" /></div><div class="bt" v-if="expand ? true : showBt"><div class="left"><slot name="btLeft" /></div><div class="right"><el-linkclass="expandBtn"type="primary":icon="`el-icon-caret-${expand ? `top` : `bottom`}`":underline="false"@click.stop="expand = !expand">{{ expand ? `折叠` : `展开` }}</el-link></div></div></div>
</template>
<script>
export default {name: `sgCollapseText`,components: {},data() {return {maxHeight: 100, //文本折叠可视区域showBt: false,expand: false,text: ``,form: {},};},props: ["data"],watch: {data: {handler(newValue, oldValue) {//console.log(`深度监听${this.$options.name}：`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = JSON.parse(JSON.stringify(newValue));this.$g.convertForm2ComponentParam(`text`, this);this.$g.convertForm2ComponentParam(`expand`, this);this.$g.convertForm2ComponentParam(`maxHeight`, this);this.$nextTick(() => {this.judgeShowBt();this.$el.style.setProperty(`--maxHeight`,typeof this.maxHeight === "string"? this.maxHeight: `${parseFloat(this.maxHeight)}px`); //js往css传递局部参数});}},deep: true, //深度监听immediate: true, //立即执行},expand(d) {this.$emit(`expand`, d);},},created() {},mounted() {},beforeDestroy() {},methods: {judgeShowBt() {//判断文本内容是否超出了外层DIV的高度、宽度，此时出现了纵向、横向滚动条（如果用了overflow: hidden;则不会出现滚动条）let DOM = this.$refs.text;if (DOM.scrollHeight > DOM.clientHeight) {this.showBt = true;}},},
};
</script>
<style lang="scss" scoped>
.sgCollapseText {& > .text {/*多行省略号*/overflow: hidden;max-height: var(--maxHeight);overflow-y: auto;/*上下渐变遮罩(兼容IOS)*/mask-image: linear-gradient(white calc(100% - 20px), transparent);&[expand] {max-height: revert;mask-image: revert;}}& > .bt {display: flex;justify-content: space-between;align-items: center;}
}
</style>
demo
<template><div :class="$options.name"><sgCollapseText:data="{text: `<div style='line-height: 1.6'><p>我陪你走到最后，能不能别想太多，会不会手牵着手，晚一点再到尽头，你说不该再相见只为了瞬间，谢谢你让我听见因为我在等待永远。</p><b>我一路向北，离开有你的季节，你说你好累，已无法再爱上谁。风在山路吹，过往的画面全都是不对，细数惭愧，我伤你几回。</b>我想我是太过依赖，在挂电话的刚才，坚持学单纯的小孩，<spanstyle='color: #f56c6c; font-weight: bold; font-size: 24px'>静静看守这份爱</span>，知道不能太依赖，怕你会把我宠坏，你的香味一直徘徊，我舍不得离开。缓缓飘落的枫叶像思念，为何挽回要赶在冬天来之前，爱你穿越时间，两行来自秋末的眼泪，让爱渗透了地面我要的只是你在我身边。</div>`,expand: expand,}"@expand="expand = $event"/></div>
</template>
<script>
import sgCollapseText from "@/vue/components/admin/sgCollapseText";
export default {components: { sgCollapseText },
};
</script>
