vue现实富文本内容太长显示省略号...，点击更多展示全部，伪类元素添加点击事件，伪元素设置宽高

更多按钮是通过伪元素追加到简介后面，并给他添加点击事件
（父元素设置pointer-events:none;伪元素设置pointer-events:auto;）

效果图

html

<div class="school_detail">
    <p class="title">学校简介</p>
     <div>
          <div :class="isLength?'more_text':''"
           v-html="isLength?schoolInfo:schoolData" @click="isLength=false"></div>
     </div>
</div>

js

data(){
	return{
	 		isLength:false,//判断内容是否过长
            schoolInfo:"",//记录省略之后的内容
            schoolData：“”,//记录源数据
	}
},
mounted(){
	this.getData();
},
methods:{
	//获取源数据 schoolData
	getData(){
		this.schoolData = xxxx;
		this.schoolInfo = this.richTextFormat(this.schoolData)
	},
	//内容超过200个字符显示省略号
   richTextFormat(value) {
       value = value.replace(/<\/?.+?>/g,'')
       value = value.replace(/\s+/g,'')
       if (value.length > 200) {
           this.isLength = true;
           return value.slice(0, 200) + "...";
       }else{
           this.isLength = false;
       }
       return value;
   },
}

css

.more_text{
    pointer-events:none;//父元素不触发点击事件
}
.more_text::after{ //富文本后面追加伪类元素，更多>
    content: "";
    background:url("../../assets/img/text_more.jpg") no-repeat;
    background-size:0.8rem;
    width:0.8rem;
    height:0.4rem;
    display: inline-block;
    top: 0.1rem;
    position: relative;
    left:0.2rem;
    pointer-events:auto;//***********该属性可触发点击事件
}