vue+vant实现文本超出一行显示展开和收起

随手记录一个小的组件：再写 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；