随手记录一个小的组件:再写 H5 的时候遇到这样一个小的效果,文本超出一行右侧显示展开按钮,点击可以展开和收起超出的文本;效果很简单,这里记录一下,方便以后之间用;
1、子组件
<template>
<div class="contain">
<div :style="{height:showMore?'auto':height+'px'}" class="box">
<p ref="text">{{text}}</p>
</div>
<p v-if="isLongContent" class="img" @click="showMore = !showMore">
<img v-if="!showMore" class="btn" src="@/assets/activity/down.png"/>
<img v-else class="btn" src="@/assets/activity/up.png"/>
</p>
</div>
</template>
<script>
export default{
data(){
return{
showMore:false,//展示按钮
isLongContent:true
}
},
props:{
text:{//文本
type:String
},
height:{//文本一行的高度
type:Number,
default:20
}
},
mounted(){
this.$nextTick(()=>{
let content = this.$refs.text.clientHeight;
if(content > this.height){
this.isLongContent = true
}else{
this.isLongContent = false;
}
})
}
}
</script>
<style>
.contain{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.btn{
width: 13px;
height: 9px;
}
.box{
overflow: hidden;
}
.img{
text-align: right;
width: 30px;
}
</style>
2、父组件
<textOpenHide :text="descript" :height=20></textOpenHide>
import textOpenHide from "@/components/textOpenHide"
components:{
textOpenHide
},
data(){
return{
descript:'test'
}
}
后面需要的时候还可以动态传入字体颜色、字号等属性;我这里是在 H5 项目中使用的,引用了插件会自动将 px 单位转化为 rem;