vue单行文本溢出会出现title提示自定义指令

更新时间：2023年01月18日 10:04:00 作者：qb

这篇文章主要为大家介绍了vue单行文本溢出会出现title提示自定义指令，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

平时开发中，如果标题超出一行，我们希望为其添加title的提示，但是，如果统一加title=xxx，会出现，文本是否超出都会出现title的现象。

1、直接使用title

<template>
  <div class="parent">
    <h3>古诗：</h3>
    <div class="child" :title="msg">
      {{ msg }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "更上一层楼",
    };
  },
};
</script>
<style>
.parent {
  display: flex;
  align-items: center;
  width: 200px;
}
.child {
  flex: 1;
}
</style>

粘贴到自己的自己的.vue文件中会发现，不管什么时候，都会提示title。

2、使用自定义指令

现在我们实现一个自定义指令，实现单行溢出省略号和title提示的功能。

directives: {
    ellipsis: {
        inserted: function (el, binding) {
            // 设置超出隐藏
            el.style.overflow = "hidden";
            el.style.textOverflow = "ellipsis";
            el.style.whiteSpace = "nowrap";
            // 鼠标移入提示title
            if (el.clientWidth < el.scrollWidth) {
              el.title = el.innerHTML;
            }
        },
    },
},

使用方式：

<div class="child" v-ellipsis>
    {{ msg }}
</div>

此时，如果文本不超出一行，是不会有title提示的。

如果超过一行，就会有...和title提示，比如我们把诗写全了。

msg: "白日依山尽，黄河入海流。欲穷千里目，更上一层楼",

是不是发现，一个v-ellipsis就可以实现省略号和超出一行title提示的功能，粘贴可用。

以上就是vue单行文本溢出会出现title提示自定义指令的详细内容，更多关于vue文本溢出title提示指令的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue element封装form表单的实现
本文主要介绍了vue element封装form表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
在vue中获取dom元素内容的方法
本篇文章主要介绍了在vue中获取dom元素内容的方法，可以通过给标签加ref属性，这里整理了详细的代码,有兴趣的可以了解一下
2017-07-07
Vue子组件调用父组件事件的3种方法实例
大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况,这篇文章主要给大家介绍了关于Vue子组件调用父组件事件的3种方法,需要的朋友可以参考下
2024-01-01
vue路由跳转传参数的方法
这篇文章主要介绍了vue路由跳转传参数的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
$vue文本识别"\n"换行问题的解决方式$
vue文本识别"\n"换行问题的解决方式
在页面中经常会遇到自定义文本,如果文本过长就需要换行,在HTML中可以通过标签换行,也可以通过\n转椅字符换行,下面这篇文章主要给大家介绍了关于vue文本识别“\n”换行问题的解决方式,需要的朋友可以参考下
2022-11-11
VsCode工具开发vue项目必装插件清单(推荐!)
对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,下面这篇文章主要给大家介绍了关于VsCode工具开发vue项目必装插件的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-09-09
Vue+Bootstrap收藏（点赞）功能逻辑与具体实现
这篇文章主要为大家详细介绍了Vue+Bootstrap收藏（点赞）功能逻辑与具体实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
详解vue 命名视图
这篇文章主要介绍了vue 命名视图的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue中router-view和component :is的区别解析
这篇文章主要介绍了Vue中router-view和component :is的区别解析,router-view用法直接填写跳转路由,路由组件会渲染<router-view></router-view>标签,本文给大家介绍的非常详细,需要的朋友可以参考下
2023-10-10
Vue3中使用setup通过ref获取子组件的属性
这篇文章主要介绍了Vue3中使用setup通过ref获取子组件的属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07