vue3中教你如何使用指令解决文本的溢出提示

已于 2024-07-06 23:54:41 修改
阅读量1.5k 收藏 36
点赞数 12
分类专栏： vue3 文章标签： vue.js elementui javascript
于 2024-05-14 15:17:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41277748/article/details/138855857
版权

最新的vue3文字气泡提示Tooltip已发布github,有问题和需求欢迎大佬来GitHub提issue，欢迎star和fork，谢谢！！！！

来吧展示

在这里插入图片描述
在这里插入图片描述

在我们项目开发中,经常会有超长文本溢出提示,未溢出则不提示的场景。
在项目开发中遇到了比较复杂的场景,在一个组织树中,我们使用了el-tree来显示组织树,文字长度不一,太长的显示不全，刚开始我们使用滚动条，结果不好看
后来我们就直接再el-tree中添加el-tooltip,发现没啥问题鼠标移入正常提示，但是再往下滚动的时候发现，页面会卡顿，因为每个el-tree都会产生一个el-tooltip，
只不过是通过v-if进行显示和隐藏的，频繁显示性能开销很大，性能极差，页面中还会出现一堆的 注释
想着开发一个指令，与el-tooltip类似，超出显示…移入显示内容

如下图所示,
请添加图片描述

<script lang="ts" setup>

import {ref} from "vue";

const treeData = ref([
  {
    "id": "65118224801137459281926519380023",
    "title": "测试",
    "level": 1,
    "parentId": "464064658652315648",
    "type": "PROJECT",
    "enable": 1,
    "list": [
      {
        "id": "65141629137928601691056522250367",
        "title": "未超出长度",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      },
      {
        "id": "65141629137928601691056522250368",
        "title": "超出隐藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      },
      {
        "id": "65141629137928601691056522250369",
        "title": "超出隐藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      }
    ]
  },
])

const defaultProps = {
  children: 'list',
  label: 'title',
}


const tooltipTitle = ref("")
const showTitle = ref(true)

const onShowNameTipsMouseenter = (e) => {
  let target = e.target;
  let textLength = target.clientWidth;
  let containerLength = target.scrollWidth;
  if (textLength < containerLength) {
    tooltipTitle.value = e.target.innerText;
    showTitle.value = false;
  } else {
    showTitle.value = true;
  }
}

</script>

<template>
  <el-tree
      :data="treeData"
      :props="defaultProps"
      style="width: 150px"
  >
    <template #default="{ node }">
      <el-tooltip
          :content="tooltipTitle"
          :disabled="showTitle"
          effect="dark"
          placement="top"
      >
      <span
          class="span-ellipsis"
          @mouseover="onShowNameTipsMouseenter"
      >{{ node.label }}</span
      >
      </el-tooltip>
    </template>
  </el-tree>
</template>

<style lang="scss" scoped>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>

这样的代码比较复杂,而且复用性极低。如果在其他页面也有类似的场景,我们就不得不cv了

指令开发

如何判断是否溢出

这也算是一个知识点,首先我们需要判断文本是否溢出了节点。如何解决文本是否溢出,在element-ui中el-table有一个文本溢出可以隐藏，所以我再其源码中找到了这个element-ui/packages/table/src/table-body.js，判断溢出的方法，代码如下

const range = document.createRange();
range.setStart(cellChild, 0);
range.setEnd(cellChild, cellChild.childNodes.length);
const rangeWidth = range.getBoundingClientRect().width;
const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
    (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {
    // ...
}

我们稍微改造一下，拿来用

实现溢出指令

function getElStyleAttr(element, attr) {
    const styles = window.getComputedStyle(element)
    return styles[attr]
}

const isOverflow = (target) => {
    const scrollWidth = target.scrollWidth
    const offsetWidth = target.offsetWidth
    const range = document.createRange()
    range.setStart(target, 0)
    range.setEnd(target, target.childNodes.length)
    const rangeWidth = range.getBoundingClientRect().width
    const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
    return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
}
export const ellipsisTooltip = {
    mounted(el, binding) {
        // 避免用户遗漏样式,我们必须强制加上超出...样式
        el.style.overflow = 'hidden'
        el.style.textOverflow = 'ellipsis'
        el.style.whiteSpace = 'nowrap'

        const onMouseEnter = (e) => {
            if (isOverflow(el)) {
                console.log('溢出了')
            } else {
                console.log('未溢出')
            }
        }
        el.addEventListener('mouseenter', onMouseEnter)
    }
}

看下效果吧
请添加图片描述

如何把溢出的节点挂载到el-tooltip上

我们不直接像el-tooltip挂载到每个文本上面，这样就和el-tooltip没啥区别
我们直接把它添加在全局body下，而且每次直会显示一个，移出就隐藏删除添加的tooltip

首先我们需要准备好组件

MyTooltip.vue

<template>
  <!-- 指示 -->
  <transition name="el-fade-in-linear">
    <div v-show="tooltipShow" :style="tooltipStyle" class="wq-tooltip"
    >
      <span class="wq-tooltip-text" v-text="text"></span>
      <div :class="[
          {'left':placements === 'left'},
          {'bottom':placements==='bottom'},
          {'right':placements==='right'},
          {'top':placements==='top'}]" class="wq-tooltip-arrow"></div>
    </div>
  </transition>
</template>

<script>
import {ref, computed, onMounted} from 'vue'

export default {
  setup() {

    // 显示弹框
    const tooltipShow = ref(false);

    // 提示内容
    const text = ref()

    // 方向
    const placements = ref('left')

    // 显示
    function showTip() {
      tooltipShow.value = true
    }
    //设置提示内容
    function setContent(content) {
      text.value = content
    }
    //隐藏
    function hiddenTip() {
      tooltipShow.value = false
    }

    // 位置
    const tooltipPosition = ref({
      x: 0,
      y: 0
    })
    const tooltipStyle = computed(() => {
      return {
        transform: `translate3d(${tooltipPosition.value.x}px,${tooltipPosition.value.y}px,0)`
      }
    })
    return {
      tooltipShow,
      showTip,
      hiddenTip,
      setContent,
      tooltipPosition,
      tooltipStyle,
      text,
      placements,
    }
  }
}
</script>

<style lang="scss" scoped>
// tooltip
.wq-tooltip {
  padding: 10px;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
  position: fixed;
  left: 0;
  top: 0;
  background: #303133;
  color: #fff;
  z-index: 1000;
  display: block;
  border-radius: 8px;
  font-weight: 500;
  pointer-events: none;
}

// 小箭头
.wq-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
}

// 如果在左侧
.wq-tooltip-arrow.left {
  border-color: transparent transparent transparent #303133;
  right: -15px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

// 如果在下侧
.wq-tooltip-arrow.bottom {
  top: -15px;
  border-color: transparent transparent #303133 transparent;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

// 如果在右侧
.wq-tooltip-arrow.right {
  left: -15px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  border-color: transparent #303133 transparent transparent;
}

// 如果在上侧
.wq-tooltip-arrow.top {
  bottom: -15px;
  border-color: #303133 transparent transparent transparent;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* 动画 */
.tooltip-enter-from,
.tooltip-leave-to {
  opacity: 0;
  transition: opacity .3s ease;
}

.tooltip-leave-from,
.tooltip-enter-to {
  transition: opacity .1s ease;
}
</style>

在指令js中鼠标移入时挂载该组件，移出时销毁组件

directive.js

// 引入组件
import {createApp, nextTick} from "vue";
import MyToolTip from './MyToolTip.vue'

// 位置定位
function calculationLocation(el, target, placements) {
    if (!el || !target) return;
    el.tooltipPosition.y = 0;
    el.tooltipPosition.x = 0;
    let el_dom = el.$el.nextElementSibling.getBoundingClientRect()
    let target_dom = target.getBoundingClientRect()

    if (placements === "left") {
        el.tooltipPosition.x = target_dom.x - el_dom.width - 10
        el.tooltipPosition.y = target_dom.y - el_dom.height / 2 + target_dom.height / 2
    } else if (placements === "bottom") {
        el.tooltipPosition.x = target_dom.x + target_dom.width / 2 - el_dom.width / 2
        el.tooltipPosition.y = target_dom.y + el_dom.height + 10
    } else if (placements === "right") {
        el.tooltipPosition.x = target_dom.x + target_dom.width + 10
        el.tooltipPosition.y = target_dom.y - el_dom.height / 2 + target_dom.height / 2
    } else if (placements === "top") {
        el.tooltipPosition.x = target_dom.x + target_dom.width / 2 - el_dom.width / 2
        el.tooltipPosition.y = target_dom.y - el_dom.height - 10
    }
}

// 方向
const allPlacements = ['left', 'bottom', 'right', 'top']


function getElStyleAttr(element, attr) {
    const styles = window.getComputedStyle(element)
    return styles[attr]
}

const isOverflow = (target) => {
    const scrollWidth = target.scrollWidth
    const offsetWidth = target.offsetWidth
    const range = document.createRange()
    range.setStart(target, 0)
    range.setEnd(target, target.childNodes.length)
    const rangeWidth = range.getBoundingClientRect().width
    const padding = (parseInt(getElStyleAttr(target, 'paddingLeft'), 10) || 0) + (parseInt(getElStyleAttr(target, 'paddingRight'), 10) || 0)
    return (rangeWidth + padding > target.offsetWidth) || scrollWidth > offsetWidth
}

export const ellipsisTooltip = {
    mounted(el, binding) {
        //获取指令的参数
        const {
            value: {
                placement, content, destroyOnLeave
            } = {}
        } = binding;
        // 加上超出...样式
        el.style.overflow = "hidden";
        el.style.textOverflow = "ellipsis";
        el.style.whiteSpace = "nowrap";
        //鼠标移开时 清除元素
        const onMouseLeave = () => {
            if (el.w_tipInstance) {
                el.w_tipInstance.hiddenTip()
                el.w_tooltip.remove()
                el.w_tipInstance = null
                el.w_tooltip = null

            }
        };
        const onMouseEnter = () => {
            // 判断内容长度 需要展示
            if (isOverflow(el)) {
                const directiveList = allPlacements.filter(placement => binding.modifiers[placement])
                const placements = directiveList.length ? directiveList : allPlacements
                if (!el.w_tooltip) {
                    // 创建tooltip实例
                    const vm = createApp(MyToolTip)
                    // 创建根元素
                    el.w_tooltip = document.createElement('div')
                    // 挂载到页面
                    document.body.appendChild(el.w_tooltip)
                    el.w_tooltip.id = `tooltip_${Math.floor(Math.random() * 10000)}`
                    el.w_tipInstance = vm.mount(el.w_tooltip)
                }
                // 设置 tooltip 显示方向
                el.w_tipInstance.placements = placement || placements[0] || 'top'
                // 设置显示内容
                el.w_tipInstance.setContent(content || el.innerText)
                // 使 tooltip 显示
                el.w_tipInstance.showTip()
                nextTick(() => {
                    // 计算 tooltip 在页面中的位置
                    calculationLocation(el.w_tipInstance, el, placements[0])
                })
                el._scrollHandler = () => {
                    // 重新定位位置
                    if (el.w_tipInstance && el.w_tipInstance.tooltipShow) calculationLocation(el.w_tipInstance, el, placements[0])
                }
                window.addEventListener('scroll', el._scrollHandler)
                const _destroyOnLeave = destroyOnLeave || true
                if (_destroyOnLeave) el.addEventListener("mouseleave", onMouseLeave);
            }
        };
        el.addEventListener("mouseenter", onMouseEnter);
    },
    unmounted(el) {
        if (el.w_tooltip) {
            document.body.removeChild(el.w_tooltip)
        }
        window.removeEventListener('scroll', el._scrollHandler)
    }
}

指令和组件都好了，我们就在全局配置指令即可

import App from './App.vue'
import {ellipsisTooltip} from './directive.js'

const app = createApp(App);
app.directive('ellipse-tooltip', ellipsisTooltip);
app.mount('#app');

配置好全局指令后，页面中就可以直接使用了

<script lang="ts" setup>

import {ref} from "vue";

const treeData = ref([
  {
    "id": "65118224801137459281926519380023",
    "title": "测试",
    "level": 1,
    "parentId": "464064658652315648",
    "type": "PROJECT",
    "enable": 1,
    "list": [
      {
        "id": "65141629137928601691056522250367",
        "title": "未超出长度",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      },
      {
        "id": "65141629137928601691056522250368",
        "title": "超出隐藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      },
      {
        "id": "65141629137928601691056522250369",
        "title": "超出隐藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏藏",
        "level": 2,
        "parentId": "65118224801137459281926519380023",
        "type": "PROJECT",
        "enable": 1,
        "list": []
      }
    ]
  },
])

const defaultProps = {
  children: 'list',
  label: 'title',
}


const tooltipTitle = ref("")
const showTitle = ref(true)

const onShowNameTipsMouseenter = (e) => {
  let target = e.target;
  let textLength = target.clientWidth;
  let containerLength = target.scrollWidth;
  if (textLength < containerLength) {
    tooltipTitle.value = e.target.innerText;
    showTitle.value = false;
  } else {
    showTitle.value = true;
  }
}

</script>

<template>
  <el-tree
      :data="treeData"
      :props="defaultProps"
      style="width: 150px"
  >
    <template #default="{ node }">
      <!--      <el-tooltip-->
      <!--          :content="tooltipTitle"-->
      <!--          :disabled="showTitle"-->
      <!--          effect="dark"-->
      <!--          placement="top"-->
      <!--      >-->
      <span v-ellipse-tooltip.top
            class="span-ellipsis"
            @mouseover="onShowNameTipsMouseenter"
      >{{ node.label }}</span
      >
      <!--      </el-tooltip>-->
    </template>
  </el-tree>
</template>

<style lang="scss" scoped>
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}
</style>

看看效果
请添加图片描述

到这里我们的ellipse-tooltip指令就完成了，还有很大改进的地方，需要大佬们自行去完善了

vue2 文本溢出那些事
小白小白从不日别的博客
09-24 441
平时开发中，如果标题超出多行，我们希望出现省略号，并且为其添加简单提示。但是，如果我们在全局写公共class类，行数不好控制。如果统一加title=xxx，又会出现文本是否超出都会出现title的现象。那么到底该如何实现？
【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips
山有木兮木有枝 心悦君兮君不知
06-07 2087
【el-tooltips改造】Vue实现文本溢出才显示el-tooltip，否则不显示el-tooltips
vue3.0 element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示
weixin_49826079的博客
12-22 4136
实现一个内容超出显示省略号，并鼠标浮入显示tooltip，不超出的不显示tooltip组件
vue3自定义指令实现文字溢出省略，鼠标移入展示全部内容
Cookie686的博客
10-07 1008
vue3自定义指令实现文字溢出省略，鼠标移入展示全部内容
Vue 3 自定义指令：实现自动滚动效果
最新发布
weixin_63115449的博客
03-21 892
指令的主要功能是监听页面大小的变化，并根据内容的宽度和容器的宽度自动为文本内容添加或移除滚动动画的 CSS 类。当内容宽度超出容器宽度时，它会为内容添加一个滚动动画类，使得文本能够在容器中自动滚动展示；而当内容宽度小于或等于容器宽度时，它则会移除滚动动画类，避免不必要的动画效果。通过本文的深入解析，我们了解了 Vue 3 自定义指令的实现原理、使用方法以及它的优势和应用场景。这个指令为我们提供了一种简单而有效的解决方案，用于在有限的空间内展示较长的文本内容，并且能够自动适应不同的屏幕尺寸。
Vue点击事件添加文本出现文本溢出
m0_56690946的博客
03-02 208
Vue点击事件添加文本出现文本溢出 浏览器显示如下： 代码如下： <template> <h2 class="title" ref="titleRef">{{ message }}</h2> <button @click="addContent">添加内容</button> </template> <script> import { ref} from 'vue' export default { s
Vue3结合el-tooltip组件实现文字溢出时，鼠标滑过显示全部文本
qiansitong的博客
10-31 1236
文本溢出，鼠标划过悬浮展示全部文本效果
自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用
qq1219579255的博客
03-13 7472
通过自定义指令代替el-tooltip并实现仅在文字溢出时才会出现提示，不溢出不展示，实现el-table的show-overflow-tooltip效果，并可根据el-tooltip自身配置参数自由调节展示形式。
VUE3 element-ui table文字过长-进行省略溢出处理
m0_62017325的博客
12-21 2205
VUE3 element-ui table文字过长-进行省略溢出处理
vue实现移动端项目多行文本溢出省略
10-15
在移动端项目开发中，文本溢出显示省略号是一种常见的交互形式，尤其在文本内容超过容器宽度时，为了保持界面的整洁性和用户的阅读体验，通常需要对多行文本进行溢出处理。在Vue框架中，实现这样的功能既需要前端CSS...
vue 实现超长文本截取,悬浮框提示
10-15
具体实现方法可以通过对HTML元素使用CSS样式来控制文本溢出的表现，并结合JavaScript以及可能的Vue指令来处理事件逻辑，如触发悬浮框显示等。 首先，通过CSS样式可以实现文本的截断效果。在Vue的模板中，可以使用...
Vue+ElementUI使用el-popover内文本溢出解决
06-10
3. 使用ElementUI的popover文本溢出指令 ElementUI提供了一个叫做`v-popover`的指令，可以直接在文本所在的元素上使用。例如： ``` 这是一段很长的文本，可能会导致溢出&#39;">Hover me ``` 其中，`v-popover`指令的...
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令 目录 安装 将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。 拥有所有文件后，打开main.js文件（或任何挂载应用程序的文件），然后导入这些文件。然后使用app.directive全局添加v-tooltip自定义指令。它看起来应该类似于： import { createApp } from "vue" ; import App from "./App.vue" ; import tooltip from "./directives/tooltip.js" ; import "@/assets/tooltip.css" ; const app = createApp ( App ) ; // app.directive&#39;s
vue判断文字是否溢出，溢出显示tooltip
灰色头像@的博客
03-23 943
同样适用于el-popoverel-tooltiptitle, 根据文字是否溢出，来控制tooltip显示// customTooltip 组件 < template > < el - popover : disabled = "!vue3 写法// vue3 写法 < script setup lang = "ts" name = 'customTooltip' > import {vue3 写法// vue2 写法 < script > export default {
Vue3警告提示（Alert）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
07-18 5309
警告提示，展现需要关注的信息，支持：五种类型；无边框；可关闭；辅助性文字介绍；辅助图标；自定义图标；自定义关闭文字；自定义操作项；自定义主题色等；总之，功能丰富，简单易用，总能满足你的想象😁😁
Vue3全局提示（Message）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
03-17 8843
全局提示调用一次只展示一个提示，调用多次则依次展示多个，按照调用先后顺序依次自动关闭，支持：多种提示类型；自定义图标；自定义样式；自定义关闭延时；总之，功能丰富，简单易用，满足你的所有幻想😁
vue3 文字超出一行自动缩小
weixin_56335924的博客
06-14 505
vue3 文字超出一行自动缩小
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值