<div class="introcontent">
  	<div :class="{ show: isShow }">
   		{{ introcontent }}
  </div>
	<div class="status" v-if="isOver" @click="changeStatus">
 		<span>{{ status}}</span>
	</div>
</div>

.show{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 4; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
}

import { ref, onMounted } from "vue"
let introcontent = ref("文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字")
let isShow = ref(false)
let isOver = ref(false)
let status= ref("展开")
onMounted(() => {
    console.log("introcontent", introcontent.value.length);
    //大概字数
    if (introcontent.value.length > 232) {
        isOver.value = true
        status.value = '展开'
        isShow.value = true
    }

})
let changeStatus = () => {
    if (status.value === '展开') {
        status.value = '收起'
        isShow.value = false
    } else if (status.value === '收起') {
        status.value = '展开'
        isShow.value = true
    }

}