vue监听页面元素高度实时变化及其案例(实现文本多行溢出省略，点击后显示全部功能)

vue监听页面元素高度实时变化及其案例(实现文本多行溢出省略，点击后显示全部功能)效果预览思路需要完成一个文章列表，其中文章简介超过两行则省略，并可点击展开全部内容。原思路是给渲染简介的div一个多行文本溢出，但是此时监听到的该块高度只有两行的高度，无法判断是否溢出。{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-cl

天外来鹿

4430人浏览 · 2021-07-27 14:11:51

天外来鹿 · 2021-07-27 14:11:51 发布

vue监听页面元素高度实时变化及其案例(实现文本多行溢出省略，点击后显示全部功能)

效果预览

在这里插入图片描述

思路

需要完成一个文章列表，其中文章简介超过两行则省略，并可点击展开全部内容。
原思路是给渲染简介的div一个多行文本溢出，但是此时监听到的该块高度只有两行的高度，无法判断是否溢出。

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

因此在目标div外嵌套一个盒子，给予盒子固定高度并溢出隐藏，盒子内部内容不限制高度。
并且通过ref获取到盒子内容的实际高度，存入数组用于判断是否溢出。
定义一个showAll用于区分是否已展开，展开则取消溢省略样式。
在这里插入图片描述

<style>
    .introbox{ transition: all .5s;}
    .introbox.hidden{ position: relative; height: 40px; overflow: hidden;}
    .introbox .intro{ color: #999; font-size: 13px; line-height: 20px;}
    .introbox.hidden::after{ content: '...'; position: absolute; right: 0; bottom: 0; color: #999; font-size: 13px; line-height: 20px; background-color: #fff; z-index: 2;}
</style>
<div class="introbox" :style="{'height': allHeight[idx] + 'px'}" :class="{'hidden': allHeight[idx] > 40 && !showAll[idx]}">
    <div class="intro" ref="text">{{item.intro}}</div>
</div>
<div class="show" v-show="allHeight[idx] > 40" @click="$set(showAll, idx, !showAll[idx])">{{showAll[idx] ? '收起' : '展开'}}</div>

this.$nextTick(() => {
    // 循环计算出需要溢出省略块的高度，存入数组
    for(let i in this.list){
        this.allHeight.push(this.$refs.text[i].offsetHeight);
        this.showAll.push(false);
    }
})

此时给嵌套在外面的盒子添加一个伪类用来模拟有溢出时的省略号（字号颜色及行高与内容一致），将其定位在盒子尾部，设置背景色及层级模拟多行文本溢出省略的效果。

完整代码

<style>
    *{margin: 0; padding: 0;}
    .index_page{ width: 100%; min-height: 100%; padding: 1px 0; background-color: #f8f8f8;}
    .index_page .list{ display: flex; margin: 10px; padding: 10px; border-radius: 5px; background-color: #fff;}
    .index_page .list .img{ width: 60px; height: 60px; border-radius: 5px; margin-right: 10px; overflow: hidden;}
    .index_page .list .cont{ flex: 1 1 0; overflow: hidden;}
    .index_page .list .cont .title{ color: #000; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 1.5; margin: 0;}
    .index_page .list .cont .introbox{ transition: all .5s;}
    .index_page .list .cont .introbox.hidden{ position: relative; height: 40px; overflow: hidden;}
    .index_page .list .cont .introbox .intro{ color: #999; font-size: 13px; line-height: 20px;}
    .index_page .list .cont .introbox.hidden::after{ content: '...'; position: absolute; right: 0; bottom: 0; color: #999; font-size: 13px; line-height: 20px; background-color: #fff; z-index: 2;}
    .index_page .list .cont .show{ display: inline-block; color: #0C81E0; float: right; font-size: 13px;}
</style>
<body>
<div id="index" class="index_page">
    <div class="list" v-for="(item, idx) in list">
        <div class="img"><img src="https://img1.baidu.com/it/u=2728776560,2236636365&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
        <div class="cont">
            <h3 class="title">vue监听页面元素高度实时变化及其案例</h3>
            <div class="introbox" :style="{'height': allHeight[idx] + 'px'}" :class="{'hidden': allHeight[idx] > 40 && !showAll[idx]}">
                <div class="intro" ref="text">{{item.intro}}</div>
            </div>
            <div class="show" v-show="allHeight[idx] > 40" @click="$set(showAll, idx, !showAll[idx])">{{showAll[idx] ? '收起' : '展开'}}</div>
        </div>
    </div>
</div>
<script>
    var indexVm = new Vue({
        el: '#index',
        data() {
            return {
                list: [],
                subHeight: '',
                allHeight: [],
                showAll: []
            }
        },
        mounted() {
            this.list = [
                {intro: 'vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例'},
                {intro: 'vue监听页面元素高度实时变化及其案例vue监听页面元素高度'},
                {intro: 'vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高度实时变化及其案例vue监听页面元素高'},
                {intro: 'vue监听页面元素高度实时变化及其案例vue'},
                {intro: 'vue监听页面元素高度实时变化及其案例vue监听'},
            ];
        },
        watch: {
            list: function(){
                this.$nextTick(() => {
                    // 循环计算出需要溢出省略块的高度，存入数组
                    for(let i in this.list){
                        this.allHeight.push(this.$refs.text[i].offsetHeight);
                        this.showAll.push(false);
                    }
                })
            }
        }
    })
</script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^