您现在的位置是:首页 >技术交流 >vue 组件 隐藏内容,点击展示更多功能网站首页技术交流
vue 组件 隐藏内容,点击展示更多功能
简介vue 组件 隐藏内容,点击展示更多功能
效果图
代码
<template>
<div class="m-text-overflow modules">
<div class="l-content" :style="contentStyle">
<div ref="refContent">
<slot>
<span v-html="content"> </span>
</slot>
</div>
</div>
<div class="l-show-more" v-if="isClose">
<div class="l-show-more__text" @click="handleShowMore">
<slot name="showMore">
{{ showMoreText }}
</slot>
</div>
</div>
</div>
</template>
<script lang="ts">
/**
* @Description 文本内容溢出组件
* @property {string} content 要展示的文本内容
* @property {number} height 要默认展示内容的高度
* @property {string} showMoreText 点击显示更多的文本
*/
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
components: {},
})
export default class MTextOverflow extends Vue {
/** 要展示的文本内容 */
@Prop({ default: '' }) protected content!: string;
/** 要默认展示内容的高度 */
@Prop({ default: 100 }) protected height!: number;
/** 要展示的文本内容 */
@Prop({ default: '点击查看更多' }) protected showMoreText!: string;
/**
* 状态
* open 内容已展开
* close 内容已收起
*/
status: 'open' | 'close' = 'close';
/** 观察内容变化的对象 */
mutationObserver: MutationObserver | null = null;
get isOpen(): boolean {
return this.status === 'open';
}
get isClose(): boolean {
return this.status === 'close';
}
get contentStyle() {
if (this.isClose) {
return {
height: `${this.height}px`,
};
}
return {};
}
mounted() {
this.handleContent();
/** 监听内容变化,然后处理要不要显示展开按钮逻辑 */
this.mutationObserver = new MutationObserver(() => {
this.handleContent();
});
if (this.$refs.refContent) {
this.mutationObserver.observe(this.$refs.refContent as Element, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
});
}
}
/** 处理内容要不要展示显示更多逻辑 */
handleContent() {
if ((this.$refs.refContent as Element).getBoundingClientRect().height > this.height) {
this.status = 'close';
} else {
this.status = 'open';
}
}
handleShowMore() {
this.status = 'open';
}
destroyed() {
this.mutationObserver?.disconnect();
}
}
</script>
<style lang="scss" scoped>
.m-text-overflow.modules {
background: #f7f7f7;
padding: 16rpx;
position: relative;
.l {
&-content {
overflow: hidden;
}
&-show-more {
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
padding-top: 40rpx;
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
z-index: 10;
&__text {
display: inline-block;
cursor: pointer;
margin-bottom: 20rpx;
}
}
}
}
</style>
```
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。