93 lines
2.5 KiB
Vue
93 lines
2.5 KiB
Vue
<template>
|
|
<ETooltip
|
|
:content="text"
|
|
:placement="placement"
|
|
:theme="tooltipTheme"
|
|
:delay="delay"
|
|
:disabled="!showTooltip"
|
|
:max-width="tooltipMaxWidth"
|
|
transfer>
|
|
<span ref="content" @mouseenter="handleTooltipIn" class="common-auto-tip">
|
|
<template v-if="existSlot"><slot/></template>
|
|
<template v-else>{{text}}</template>
|
|
</span>
|
|
</ETooltip>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AutoTip',
|
|
props: {
|
|
content: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
placement: {
|
|
default: 'bottom'
|
|
},
|
|
tooltipTheme: {
|
|
default: 'dark'
|
|
},
|
|
tooltipMaxWidth: {
|
|
type: [String, Number],
|
|
default: 300
|
|
},
|
|
delay: {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
slotText: '',
|
|
showTooltip: false // 鼠标滑过overflow文本时，再检查是否需要显示
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.updateConetne()
|
|
},
|
|
|
|
beforeUpdate () {
|
|
this.updateConetne()
|
|
},
|
|
|
|
activated() {
|
|
this.updateConetne()
|
|
},
|
|
|
|
computed: {
|
|
text() {
|
|
const {content, slotText} = this;
|
|
if (content) {
|
|
return content;
|
|
}
|
|
if (typeof slotText === 'undefined' || slotText.length < 1 || typeof slotText[0].text !== 'string') {
|
|
return '';
|
|
}
|
|
return slotText[0].text;
|
|
},
|
|
existSlot() {
|
|
const {slotText} = this;
|
|
return !(typeof slotText === 'undefined' || slotText.length < 1);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
updateConetne () {
|
|
this.slotText = this.$slots.default;
|
|
},
|
|
handleTooltipIn () {
|
|
const $content = this.$refs.content;
|
|
let range = document.createRange();
|
|
range.setStart($content, 0);
|
|
range.setEnd($content, $content.childNodes.length);
|
|
const rangeWidth = range.getBoundingClientRect().width;
|
|
this.showTooltip = Math.floor(rangeWidth) > Math.floor($content.offsetWidth);
|
|
range = null;
|
|
},
|
|
}
|
|
}
|
|
</script>
|