Vue3.0 循环列表超出2行显示... 点击展开按钮查看全部(展开收起)
效果图:要点是:将需要文本内容溢出显示省略号的模块组件话,然后在页面渲染后进行计算父组件:<template><div class="list">... // 文本处理组件化<ellipsis-Text :group_item="item" /></div></template>子组件:<template><div cl
·
效果图:
要点是:将需要文本内容溢出显示省略号的模块组件话,然后在页面渲染后进行计算
父组件:
<template>
<div class="list">
... // 文本处理组件化
<ellipsis-Text :group_item="item" />
</div>
</template>
子组件:
<template>
<div class="bottom">
<div :id="`room_id_${group_item.room_id}`" :class="textOver && !foldBtn ? 'room_intro showEllipsis' : 'room_intro'">
{{ group_item.room_intro }}
</div>
<span class="btnWrap" v-if="textOver" @click="foldBtn = !foldBtn">
<img v-if="foldBtn" class="arrow_icon" src="@/assets/images/arrow_up.png" alt="" />
<img v-else class="arrow_icon" src="@/assets/images/arrow_down.png" alt="" />
</span>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, nextTick, onBeforeMount } from 'vue'
export default defineComponent({
name: '',
props: {
group_item: {
type: Object,
required: true
},
},
setup(props) {
const state = reactive({
textOver: false, // 超过2行
foldBtn: false // 按钮默认显示缩起
})
onBeforeMount(async () => {
nextTick(() => {
const domRef = document.getElementById(`room_id_${props.group_item.room_id}`)
if (domRef) {
const height = window.getComputedStyle(domRef).height.replace("px", "")
if (+height > 40) { // 40 -- 2行的高度
state.textOver= true;
} else {
state.textOver= false;
}
}
})
})
return {
...toRefs(state)
}
}
})
</script>
<style lang="less" scoped>
.bottom {
margin-top: 12px;
position: relative;
.Flex();
.room_intro {
flex:1;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
text-align: justify;
opacity: 0.4;
}
.showEllipsis{ // 文本溢出超出两行显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.btnWrap {
align-self: flex-end;
cursor: pointer;
.arrow_icon {
width: 16px;
height: 16px;
}
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)