效果如图:
image.png
image.png
<template>
<div class="expend-content-main-box">
<div class="content" v-if="content.length > 21">
<span v-if="!isShowAll">{{ content.slice(0, 18) }}...</span>
<span v-else>{{ content }}</span>
<div class="arrow-box" v-if="content.length > 21" @click="showAll">
<span v-if="isShowAll">收起</span>
<span v-else>展开</span>
<img
src="../assets/arrow.png"
:style="{ transform: isShowAll ? 'rotate(-180deg)' : 'rotate(0deg)' }"
alt=""
/>
</div>
</div>
<div class="content" v-else>
{{ content }}
</div>
</div>
</template>
<script>
export default {
name: 'expendContent',
props: {
content: {
type: String,
default:
'立秋以后气温由热转凉，人体的消耗也逐渐减少，食欲开始增加。因此，可根据秋季的特点来科学地摄取营养和调',
},
},
data() {
return {
isShowAll: false,
}
},
methods: {
showAll() {
this.isShowAll = !this.isShowAll
},
},
}
</script>
<style lang="less" scoped>
.expend-content-main-box {
width: 100%;
display: flex;
justify-content: space-between;
.content {
width: 100%;
font-weight: 400;
font-size: 14px;
color: #777777;
letter-spacing: 0;
white-space: pre-wrap;
line-height: 24px;
}
.arrow-box {
float: right;
display: inline-flex;
align-items: center;
line-height: 24px;
img {
width: 10px;
object-fit: contain;
margin-left: 4px;
transition: all 0.5s;
}
}
}
</style>
