Vue实现文字自动打点自动添加title气泡效果

最新推荐文章于 2023-09-09 18:21:28 发布

BIUBIUUP

最新推荐文章于 2023-09-09 18:21:28 发布

阅读量641

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/zhzs123/article/details/130332748

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了如何使用Vue的自定义指令来判断文字是否溢出，并在溢出时通过title属性创建气泡显示完整内容。通过ResizeObserver监听元素resize事件，动态管理title属性，保证了性能和用户体验。示例代码展示了具体实现过程。

摘要由CSDN通过智能技术生成

Vue实现文字自动打点自动添加title气泡效果

需求场景

需求是这样的,表格中有一列信息,字符长度有短有长,最大宽度限制在300px,溢出自动打点,但是又不想因此导致用户看不全信息,就想在文字溢出打点的时候出现一个悬浮效果,展示出全部的字段,同时对已经展示完全的字段不进行此操作,原本想通过bubble 气泡组件来实现,但是在大量数据面前,这种组件的性能开销过大,最后决定利用html当中现有的title 属性进行悬浮内容的展示.

实现方式

使用Vue的自定义指令完成字段是否溢出打点的判断,关键语句在于:

el.offsetWidth < (el.scrollWidth)

其中 offsetWidth 代表的是元素所占据的真实物理像素宽度,这个物理像素在box-sizing: border-box;样式下就是等于元素的width 属性,在content-box 下等于 width + border-width 请注意你所使用的样式,避免计算误差.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容,注意的是,它会对值进行四舍五入取整操作.对比二者的值即可判断出元素是否进行了溢出打点操作.

在指令的inserted 周期调用该判断,同时创建一个**ResizeObserver **监听器监听元素的resize事件(比全局监听性能要好),这样可实现动态的title属性增删.

directives: {
    tooltip: {
        // 指令的定义
        inserted: (el, binding) => {
            if (el.offsetWidth < (el.scrollWidth)) {
                el.title = binding.value.title
            }
            // 创建一个ResizeObserver监听器监听元素的resize事件
            const resizeObserver = new ResizeObserver((entries) => {
                entries.forEach(({ target }) => {
                    if (target.offsetWidth < (target.scrollWidth)) {
                        target.title = binding.value.title
                    }else {
                        target.title = ''
                    }
                })

            })
            resizeObserver.observe(el)
        }
    }
}, 
    
// use
<p v-tooltip="{'title': message}">{{message}}</p>

效果演示

Video_20230423_103431_832(1)

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            margin-top: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        p {
            font-size: 20px;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
    <div id="app">
        <p v-tooltip="{'title': message}" :style="{'maxWidth': num + 'px'}">{{message}}</p>
        <button @click="handeChange">change</button>
    </div>

    <script>
        let example1 = new Vue({
            el: '#app',
            data() {
                return {
                    message: "测试溢出打点出气泡title功能",
                    num: 500,

                }

            },
            computed: {
                title() {
                    return this.message
                }
            },
            directives: {
                tooltip: {
                    // 指令的定义
                    inserted: (el, binding) => {
                        if (el.offsetWidth < (el.scrollWidth)) {
                            el.title = binding.value.title
                        }
                        const resizeObserver = new ResizeObserver((entries) => {
                            entries.forEach(({ target }) => {
                                if (target.offsetWidth < (target.scrollWidth)) {
                                    target.title = binding.value.title
                                } else {
                                    target.title = ''
                                }
                            })

                        })
                        resizeObserver.observe(el)
                    }
                }
            },
            methods: {
                handeChange() {
                    if (this.num === 200) {
                        this.num = 300
                    } else {
                        this.num = 200

                    }
                }
            }

        })
    </script>
</body>

</html>