温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3超出文本展示el tooltip如何实现

发布时间:2023-02-27 10:43:24 来源:亿速云 阅读:254 作者:iii 栏目:开发技术

这篇文章主要介绍“vue3超出文本展示el tooltip如何实现”,在日常操作中,相信很多人在vue3超出文本展示el tooltip如何实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3超出文本展示el tooltip如何实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    实现思路

    最近在做项目的时候遇到一个样式,文本超出某个宽度的时候需要展示...,鼠标移上去展示提示信息,如果过没有超出宽度则不展示提示框。这篇文章主要就是介绍如何实现的。

    首先我们分析一下要根据文本的宽度是否超过展示提示框,那么就必须要获取文本的宽度和容器的宽度,然后还要根据el-tooltip的disabled属性来判断是否需要展示tool-tip。我们可以通过自定义一个指令来是实现。大致思路如下:

    • 获取容器的宽度,获取文本的宽度。

    • 判断宽度,并且监听mouseenter事件,如果文本的宽度>容器的宽度, 就将tool-tip的disabled的属性设置为false,否则就设置为true

    特别注意:

    • 在vue3中,我们不能将指定绑定在el-tooltip上,而是需要绑定在el-tooltip的外层容器上。因此在获取元素的时候就需要在外层容器上内查找el-tooltop。

    • 在计算元素的宽度的时候还要考虑左右的padding的大小

    代码实现

    1. 创建一个自定义指令文件showTip.js。

    该文件放在directives文件夹下。内容如下:

    import { getStyle } from 'element-plus/lib/utils/dom/index';
    const showTip = {
      created(el, binding, vnode) {
        let tooltipNode = vnode.children.find((childCmpt) => childCmpt.component?.type.name == 'ElTooltip');
        if (tooltipNode) {
          // let { content } = tooltipNode.props;
          el.addEventListener('mouseenter', () => {
            tooltipNode.component.props.disabled = true;
            const range = document.createRange();
            range.setStart(el, 0);
            range.setEnd(el, el.childNodes.length);
            const rangeWidth = Math.round(range.getBoundingClientRect().width);
            const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
            if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
              tooltipNode.component.props.disabled = false;
            }
          });
        }
      }
    };
    export default showTip;

    2. 全局引入

    在main.js中引入该指令文件

    import { createApp } from 'vue'
    import App from './App.vue'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import showTip from './directives/showTip.js';
    const app = createApp(App);
    app.directive('show-tip', showTip);
    app.use(ElementPlus).mount('#app');

    3. 组件中使用

    在需要使用的组件中使用该指令

    <template>
      <div class="test-wrapper">
        <div class="test-value" v-show-tip>
        <el-tooltip placement="top" :content="name">{{name}}</el-tooltip>
        </div>
      </div>
    </template>
    <script setup>
    const name = '这是一段一段一段一段一段非常非常非常非常长长的文本';
    </script>
    <style scoped>
    .test-value {
      width: 20%;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    </style>

    效果如下: 文本超出,鼠标移上去就会展示提示信息。

    vue3超出文本展示el tooltip如何实现

    到此,关于“vue3超出文本展示el tooltip如何实现”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI