在表格操作列的删除按钮操作,普通需要二次确认,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获取组件实例调用组件内属性方法虽然方便,但是也有小小的隐性风险,当组件升级去掉了引用的属性方法后,则会失去效果。
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
effect | 默认提供的主题 | String | dark/light | dark |
content | 显示的内容,也可以通过 slot#content 传入 DOM | String | — | — |
placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
value / v-model | 状态是否可见 | Boolean | — | false |
disabled | Tooltip 是否可用 | Boolean | — | false |
offset | 出现位置的偏移量 | Number | — | 0 |
transition | 定义渐变动画 | String | — | el-fade-in-linear |
visible-arrow | 是否显示 Tooltip 箭头,更多参数可见Vue-popper | Boolean | — | true |
popper-options | popper.js 的参数 | Object | 参考 popper.js 文档 | { boundariesElement: ‘body’, gpuAcceleration: false } |
open-delay | 延迟出现,单位毫秒 | Number | — | 0 |
manual | 手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |
enterable | 鼠标是否可进入到 tooltip 中 | Boolean | — | true |
hide-after | Tooltip 出现后自动隐藏延时,单位毫秒,为 0 则不会自动隐藏 | number | — | 0 |
tabindex | Tooltip 组件的 tabindex | number | — | 0 |