el-tooltip在表格或列表中显示解决方案

el-tooltip在表格或列表中显示解决方案

在表格操作列的删除按钮操作,普通需要二次确认,ui使用了el-tooltip实现。

常见的tooltip交互是,鼠标移入区域,则显示tooltip内容。

如果是单个tooltip,使用value / v-model绑定控制显示隐藏是可以的。

如果是如上图每个操作按钮都需要tooltip,那么使用ref会更好控制。

一、默认hover模式

template代码

<el-tooltip
    ref="popover"
    effect="light"
    placement="top">
    <template>
      <div slot="content">
        <div class="tooltip_content">
          <p><i class="el-icon-warning"></i>您确认要删除该标签吗?</p>
          <p class="second_tips">删除后,已被引用的标签将全部失效</p>
        </div>
        <div class="oprate_btns">
          <button
            class="cancel_btn"
            @click="tooltipCancel(index)">取消</button>
          <button
            class="danger_btn"
            @click="tooltipConfirm(index)">删除</button
          >
        </div>
      </div>
      <span class="operation_btn_delete">删除</span>
    </template>
  </el-tooltip>

script代码

/**
     * 取消隐藏tooltip
     * @param {number} index 索引
     */
    tooltipCancel(index) {
      this.$nextTick(() => {
        this.$refs.popover[index].showPopper = false
      })
    },
    /**
     * 删除操作
     * @param {number} index 索引
     */
    tooltipConfirm(index) {
      this.$nextTick(() => {
        this.tooltipCancel(index)
        this.deleteGroup(index)
      })
    }

二、使用手动控制模式

template代码

<el-tooltip
    ref="popover"
    manual    
    effect="light"
    placement="top">
    <template>
      <div slot="content">
        <div class="tooltip_content">
          <p><i class="el-icon-warning"></i>您确认要删除该标签吗?</p>
          <p class="second_tips">删除后,已被引用的标签将全部失效</p>
        </div>
        <div class="oprate_btns">
          <button
            class="cancel_btn j-tooltip-btn"
            @click="tooltipCancel(index)">取消</button>
          <button
            class="danger_btn j-tooltip-btn"
            @click="tooltipConfirm(index)">删除</button
          >
        </div>
      </div>
      <span
        :data-index="index"
        class="operation_btn_delete j-delete-btn"
        @click="showPopper(index)">删除</span>
    </template>
  </el-tooltip>

script代码

/**
     * 显示tooltip
     * @param {number} index 索引
     */
    showPopper(index) {
      this.$nextTick(() => {
        for (let i = 0; i < this.groups.length; i++) {
          if (i !== index) {
            this.$refs.popover[i].showPopper = false
          }
        }
        this.$refs.popover[index].showPopper = true
      })
    },
    /**
     * 取消隐藏tooltip
     * @param {number} index 索引
     */
    tooltipCancel(index) {
      this.$nextTick(() => {
        this.$refs.popover[index].showPopper = false
      })
    },
    /**
     * 删除操作
     * @param {number} index 索引
     */
    tooltipConfirm(index) {
      this.$nextTick(() => {
        this.tooltipCancel(index)
        this.deleteGroup(index)
      })
    }

// 监听事件,点击目标区域外围隐藏tooltip
    document.addEventListener('click', ev => {
      if (!ev.target.classList.contains('j-tooltip-btn') && !ev.target.classList.contains('j-delete-btn')) {
        for (let index = 0, len = this.groups.length; index < len; index++) {
          this.tooltipCancel(index)
        }
      }
    })


提示:通过ref获取组件实例调用组件内属性方法虽然方便,但是也有小小的隐性风险,当组件升级去掉了引用的属性方法后,则会失去效果。

tootip组件参数 | Element

参数说明类型可选值默认值
effect默认提供的主题Stringdark/lightdark
content显示的内容,也可以通过 slot#content 传入 DOMString
placementTooltip 的出现位置Stringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
value / v-model状态是否可见Booleanfalse
disabledTooltip 是否可用Booleanfalse
offset出现位置的偏移量Number0
transition定义渐变动画Stringel-fade-in-linear
visible-arrow是否显示 Tooltip 箭头,更多参数可见Vue-popperBooleantrue
popper-optionspopper.js 的参数Object参考 popper.js 文档{ boundariesElement: ‘body’, gpuAcceleration: false }
open-delay延迟出现,单位毫秒Number0
manual手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效Booleanfalse
popper-class为 Tooltip 的 popper 添加类名String
enterable鼠标是否可进入到 tooltip 中Booleantrue
hide-afterTooltip 出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏number0
tabindexTooltip 组件的 tabindexnumber0

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注