vue多页应用,
这篇文章主要介绍了某视频剪辑软件折叠展示多行文本组件，自动根据传入的发展判断是否需要折叠，非常完美，文章通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
折叠展示多行文本组件
折叠展示多行文本组件，自动根据传入的发展判断是否需要折叠
两种模式：展开/收起展示全文本（默认)、波波展示全文本
先上代码
模板
div class= text-expand ref= text expand
div v-if=！ showPopover showPopoverJudge
span class= text-expand-content :style= expand style
{ {(text===null text===undefined text=== )？- : text }}
/span
div class=expander
跨度
v-if=showBtn showBtnJudge
跨度
v-if=！显示完整
class=操作操作-展开
@click.stop=showFullFn(true)
展开
I v-if= showBtnIcon class= icon font iconxiajiantou /
/span
跨度
五-否则
行动动作包
@click.stop=showFullFn(false)
收起
I v-if= showBtnIcon class= icon font icon Shanghai tou /
/span
/span
/div
/div
埃尔-波普沃
五-否则
:placement=popoverPlace
触发器=悬停
div class=popover-content
{{ text }}
/div
span class= text-expand-content :style= expand style slot= reference { text } }/span
/el-popover
/div
/模板
脚本
导出默认值{
名称：文本扩展，
道具：{
文本：{ //文本内容
类型：字符串，
默认值：()=
},
展开：{ //折叠显示行数
类型：数量，
默认值：()=3
},
showBtn: { //展开、折叠按钮
类型：布尔型，
默认值：真
},
showBtnIcon: { //展开、折叠图标
类型：布尔型，
默认值：真
},
showPopover: { //popover显示全文本
类型：布尔型，
默认值：错误
},
popoverPlace: { //popover位置
类型：字符串，
默认值："底部"
}
},
data () {
返回{
showFull: false，//是否展示全文本
扩展样式："",
showBtnJudge: false，//判断是否需要折叠展示按钮
showPopoverJudge: false //判断是否需要折叠展示酥脆饼
}
},
观察：{
文本：函数(瓦尔){
this.judgeExpand()
}
},
已安装(){
this.judgeExpand()
},
方法：{
显示完整Fn(值){
this.expandStyle=value？` display:-WebKit-box；断字：全断；-WebKit-line-clamp:$ { this。展开}；-webkit-box-orient:垂直；文本溢出：省略号；溢出：隐藏；`
this.showFull=value
},
judgeExpand () { //判断是否需要折叠
这个. nextTick(()={
const { expand }=this
const textExpandStyle=window。getcomputedstyle(this .$refs.textExpand)
const textExpandHeight=parse float(textexpandstyle。高度)//获取总高度
const textExpandLineHeight=parse float(textexpandstyle。行高)//获取行高
//计算行高
const rects=数学。ceil(textExpandHeight/textExpandLineHeight)
if (rects=expand) { //不需要折叠展示
this.showBtnJudge=false
this.showPopoverJudge=false
}否则{
this.showBtnJudge=true
this.showPopoverJudge=true
这个。expand style= display:-WebKit-box；断字：全断；-WebKit-line-clamp:$ { this。展开}；-webkit-box-orient:垂直；文本溢出：省略号；溢出：隐藏；`
}
})
}
}
}
/脚本
style lang=less 范围。文本-展开{
-内容{
断字：全断；
空白：预换行；
}。扩展器{
文本对齐：左对齐；
边距-顶部：6px。动作{
显示：内嵌-块；
字体大小：14px
颜色：# 0281F0
光标：指针；
我{
显示：内嵌；
字体大小：12px
}
}。开拍开拍包{
左边距：0;
}
}
}。弹出内容{
最大宽度：40vw
最大高度：30vh
溢出：隐藏；
断字：全断；
溢出-y:自动；
}
/风格
用法
text-expand:text= text :expand= 2 /
text-expand:text= text :expand= 2 :showBtnIcon= false
text-expand:text= text :expand= 2 :show popover= true
到此这篇关于某视频剪辑软件折叠展示多行文本组件的文章就介绍到这了，更多相关某视频剪辑软件折叠展示多行文本组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。