vuetify v-tooltips通过v-model控制当前item是否显示提示

懒懒yanx

已于 2023-12-06 09:56:21 修改

阅读量728

点赞数

分类专栏： vuetify 文章标签： javascript 前端 vue.js

于 2022-08-09 15:45:32 首次发布

本文链接：https://blog.csdn.net/weixin_47724912/article/details/126248981

版权

需求描述：当标题内容溢出时，鼠标悬浮显示完整标题；若标题没有溢出，则不显示toolitips

// Tooltip组件封装，组件代码内容
<template>
  <div>
    <div
      ref="tooltip"
      :class="[
        {
   'text-two-lines': !disabled && type === 'two-lines'},
        {
   'text-single-line': !disabled && type === 'single-line'},
        {
   'cursor-hover': clickable},
      ]"
      :style="{maxWidth: limitWidth ? `${limitWidth}px` : '100%'}"
      @mouseenter="triggerTooltip($event)"
      @mouseleave="triggerTooltip($event)"
    >
      {
   {
    text }}
    <<

最低0.47元/天解锁文章