VUE3组件封装代码
<template>
<a-tooltip @mouseenter="showToolTip" v-bind="getBindValue">
<template #title>
{{ props.title }}
</template>
<slot><span>{{ props.title }}</span></slot>
</a-tooltip>
</template>
<script setup>
import {defineProps,computed,useAttrs} from "vue";
const props = defineProps({
title:{
type:String,
default:''
}
})
const getBindValue = computed(() => {
const delArr = ['title']
const attrs = useAttrs()
const obj = { ...attrs, ...props }
for (const key in obj) {
if (delArr.indexOf(key) !== -1) {
delete obj[key]
}
}
return obj
})
const showToolTip = (e) => {
const {clientWidth,scrollWidth} = e.target
if (clientWidth >= scrollWidth) {
e.target.style.pointerEvents = "none";
}
}
</script>
<style scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
VUE3使用
<template>
<ToolTip :title="text" placement="topLeft">
<span class="text">{{text}}</span>
</ToolTip>
</template>
<style>
span.text{
display: inline-block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
</style>
VUE2组件封装代码
<template>
<a-tooltip @mouseenter="showToolTip" v-bind="getBindValue">
<template #title>
{{ title }}
</template>
<slot><span class="text" :style="{maxWidth:maxWidth}">{{ title }}</span></slot>
</a-tooltip>
</template>
<script>
export default {
name: "ToolTip",
props: {
title:{
type:String,
default:''
},
maxWidth:{
type:String,
default: '100%'
}
},
computed:{
getBindValue(){
const delArr = ['title','maxWidth']
const attrs = this.$attrs
const obj = { ...attrs, ...this.$props }
for (const key in obj) {
if (delArr.indexOf(key) !== -1) {
delete obj[key]
}
}
return obj
}
},
methods:{
showToolTip(e) {
const {clientWidth,scrollWidth} = e.target
if (clientWidth >= scrollWidth) {
e.target.style.pointerEvents = "none";
}
}
}
}
</script>
<style scoped>
span.text{
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
VUE2使用
<ToolTip :title="text" placement="topLeft" />