You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.3 KiB
104 lines
2.3 KiB
2 months ago
|
<template>
|
||
|
|
<el-tooltip
|
||
|
|
v-bind="mergedProps"
|
||
|
|
:disabled="disabled"
|
||
|
|
:visible="controlledVisible"
|
||
|
|
@show="handleShow"
|
||
|
|
@hide="handleHide"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
|
||
|
|
<!-- 用于自定义提示内容 -->
|
||
|
|
<template v-if="$slots.content" #content>
|
||
|
|
<slot name="content"></slot>
|
||
|
|
</template>
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'EnhancedTooltip',
|
||
|
|
props: {
|
||
|
|
content: String,
|
||
|
|
placement: {//位置
|
||
|
|
type: String,
|
||
|
|
default: 'top'
|
||
|
|
},
|
||
|
|
effect: {//主题颜色
|
||
|
|
type: String,
|
||
|
|
default: 'dark'
|
||
|
|
},
|
||
|
|
disabled: Boolean,
|
||
|
|
// 控制模式，如果为true则需要手动控制显示/隐藏
|
||
|
|
manual: Boolean,
|
||
|
|
// 延迟显示/隐藏（毫秒）
|
||
|
|
openDelay: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
closeDelay: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
// 是否在点击后隐藏（适用于点击触发）
|
||
|
|
hideAfterClick: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
controlledVisible: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
mergedProps() {
|
||
|
|
return {
|
||
|
|
effect: this.effect,
|
||
|
|
placement: this.placement,
|
||
|
|
content: this.content,
|
||
|
|
openDelay: this.openDelay,
|
||
|
|
closeDelay: this.closeDelay,
|
||
|
|
hideAfterClick: this.hideAfterClick,
|
||
|
|
...this.$attrs
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleShow() {
|
||
|
|
if (this.manual) {
|
||
|
|
this.controlledVisible = true
|
||
|
|
}
|
||
|
|
this.$emit('show')
|
||
|
|
},
|
||
|
|
handleHide() {
|
||
|
|
if (this.manual) {
|
||
|
|
this.controlledVisible = false
|
||
|
|
}
|
||
|
|
this.$emit('hide')
|
||
|
|
},
|
||
|
|
// 手动显示方法
|
||
|
|
show() {
|
||
|
|
if (this.manual && !this.disabled) {
|
||
|
|
this.controlledVisible = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 手动隐藏方法
|
||
|
|
hide() {
|
||
|
|
if (this.manual) {
|
||
|
|
this.controlledVisible = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 切换显示/隐藏状态
|
||
|
|
toggle() {
|
||
|
|
if (this.manual && !this.disabled) {
|
||
|
|
this.controlledVisible = !this.controlledVisible
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 可以添加一些自定义样式 */
|
||
|
|
</style>
|