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

最新推荐文章于 2024-04-28 16:21:00 发布

天外来鹿

最新推荐文章于 2024-04-28 16:21:00 发布

阅读量4.2k

点赞数 28

分类专栏： vue javascript html 文章标签： html vue css 列表

本文链接：https://blog.csdn.net/qq_41537593/article/details/119142555

版权

vue 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 1 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

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>

天外来鹿

关注

28
点赞
踩
36

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue监听页面元素高度实时变化及其案例(实现文本多行溢出省略，点击后显示全部功能)

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

扫一扫