<template>
<div>
<div style="display: flex; align-items: flex-end">
<p :class="istrue ? 'overs' + lengths : 'FontSize'" ref="over">
{{ title }}
</p>
<span>
<img
v-if="getImgShow"
@click="istrue = !istrue"
style="
width: 15px;
height: 15px;
margin-bottom: -5px;
cursor: pointer;
"
:src="getImgUrl(istrue)"
alt
/>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: this.text,
lengths: this.maxLines,
istrue: true,
getImgShow: false,
};
},
props: {
text: {
type: String,
default: "",
},
maxLines: {
type: Number,
default: 3,
},
},
mounted() {
this.showLife();
},
methods: {
showLife() {
let refsList = this.$refs.over;
if (refsList.scrollHeight > refsList.clientHeight) {
this.getImgShow = true;
} else {
this.getImgShow = false;
}
},
getImgUrl(img) {
if (img) {
return require("@/assets/image/open.png");
} else {
return require("@/assets/image/put.png");
}
},
},
watch: {
text: function (newVal, oldVal) {
this.title = newVal;
},
lengths: function (newVal, oldVal) {
this.maxLines = newVal;
},
},
};
</script>
<style scoped>
.overs1 {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overs2 {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overs3 {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overs4 {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.overs5 {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.FontSize {
font-size: 12px;
}
</style>
展开收起 CSS封装(组件)
最新推荐文章于 2024-05-09 16:24:24 发布