vue 折叠展示多行文本组件的实现代码
程序员文章站
2022-06-16 12:46:11
折叠展示多行文本组件折叠展示多行文本组件，自动根据传入的expand判断是否需要折叠两种模式：展开/收起展示全文本（默认）、popover展示全文本先上代码 <...
折叠展示多行文本组件
折叠展示多行文本组件，自动根据传入的expand判断是否需要折叠
两种模式：展开/收起展示全文本（默认）、popover展示全文本
先上代码
<template>
<div class="text-expand" ref="textexpand">
<div v-if="!(showpopover && showpopoverjudge)">
<span class="text-expand-content" :style="expandstyle">
{{ (text === null || text === undefined || text === '') ? '--' : text }}
</span>
<div class="expander">
<span
v-if="showbtn && showbtnjudge"
>
<span
v-if="!showfull"
class="action action-expand"
@click.stop="showfullfn(true)"
>
展开
<i v-if="showbtnicon" class="iconfont iconxiajiantou" />
</span>
<span
v-else
class="action action-pack"
@click.stop="showfullfn(false)"
>
收起
<i v-if="showbtnicon" class="iconfont iconshangjiantou" />
</span>
</span>
</div>
</div>
<el-popover
v-else
:placement="popoverplace"
trigger="hover">
<div class="popover-content">
{{ text }}
</div>
<span class="text-expand-content" :style="expandstyle" slot="reference">{{ text }}</span>
</el-popover>
</div>
</template>
<script>
export default {
name: "textexpand",
props: {
text: { // 文本内容
type: string,
default: () => ''
},
expand: { // 折叠显示行数
type: number,
default: () => 3
},
showbtn: { // 展开、折叠按钮
type: boolean,
default: true
},
showbtnicon: { // 展开、折叠icon
type: boolean,
default: true
},
showpopover: { // popover显示全文本
type: boolean,
default: false
},
popoverplace: { // popover位置
type: string,
default: 'bottom'
}
},
data () {
return {
showfull: false, // 是否展示全文本
expandstyle: '',
showbtnjudge: false, // 判断是否需要折叠展示按钮
showpopoverjudge: false // 判断是否需要折叠展示popover
}
},
watch: {
text: function (val) {
this.judgeexpand()
}
},
mounted () {
this.judgeexpand()
},
methods: {
showfullfn (value) {
this.expandstyle = value ? '' : `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;`
this.showfull = value
},
judgeexpand () { // 判断是否需要折叠
this.$nexttick(() => {
const { expand } = this;
const textexpandstyle = window.getcomputedstyle(this.$refs.textexpand)
const textexpandheight = parsefloat(textexpandstyle.height) //获取总高度
const textexpandlineheight = parsefloat(textexpandstyle.lineheight) //获取行高
// 计算行高
const rects = math.ceil(textexpandheight / textexpandlineheight)
if (rects <= expand) { // 不需要折叠展示
this.showbtnjudge = false
this.showpopoverjudge = false
} else {
this.showbtnjudge = true
this.showpopoverjudge = true
this.expandstyle = `display: -webkit-box;word-break: break-all;-webkit-line-clamp: ${this.expand};-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;`
}
})
}
}
}
</script>
<style lang="less" scoped>
.text-expand{
&-content{
word-break: break-all;
white-space: pre-wrap;
}
.expander {
text-align: left;
margin-top: 6px;
.action {
display: inline-block;
font-size: 14px;
color: #0281f0;
cursor: pointer;
i {
display: inline;
font-size: 12px;
}
}
.action.action-pack {
margin-left: 0;
}
}
}
.popover-content{
max-width: 40vw;
max-height: 30vh;
overflow: hidden;
word-break: break-all;
overflow-y: auto;
}
</style>
用法
<text-expand :text="text" :expand="2" />
<text-expand :text="text" :expand="2" :showbtnicon="false">
<text-expand :text="text" :expand="2" :showpopover="true">
到此这篇关于vue 折叠展示多行文本组件的文章就介绍到这了,更多相关vue 折叠展示多行文本组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！