先获取屏幕高度
如果小于等于1400;添加一个类
<div :class="[xiaoyu ? 'isyaoshenglue': ' ' ]"></div> v-bind结合三目运算,添加一个类名 使用的中括号
如何有省略号 div和p都可以有省略号
div{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="progress-bar-box">
<div class="progress-bar-box-div">
<div :class="[xiaoyu ? 'isyaoshenglue': '']">人脸签到</div>
<el-progress
:text-inside="true"
:stroke-width="10"
:percentage="70"
style="width:160px"
class="progress-bar"
></el-progress>
</div>
<div class="progress-bar-box-dec">35/35</div>
</div>
在data中定义一个
data:{
pingWidth: "",
xiaoyu: false //是否要省略
}
mounted() {
this.pingWidth = document.documentElement.clientWidth;
console.log("pingkuan", this.pingWidth);
if (this.pingWidth <= 1400) {
console.log("1");
this.xiaoyu = true;
}
},
.isyaoshenglue {
width: 55px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}