toolTip.vue文件
<template>
<el-tooltip
:class="className"
:effect="effect"
:content="content"
:placement="placement"
>
<div class="text-content">{{ innerText }}</div>
</el-tooltip>
</template>
<script>
export default {
name: "ElementVueTestToolTip",
props: {
className: String,
effect: {
type: String,
default: "dark",
},
content: {
type: String,
default: "测试",
},
placement: {
type: String,
default: "top-start",
},
innerText: {
type: String,
default: "占位符",
},
},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style scoped>
.text-content {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
import Vue from "vue";
import ToolTip from "./toolTip.vue";
Vue.directive("showToolTip", {
bind() {},
inserted(el, binding) {
const { offsetWidth, scrollWidth } = el;
let dom;
let innerText = el.innerText;
if (offsetWidth < scrollWidth) {
const Cxt = Vue.extend(ToolTip);
let instace = new Cxt({
propsData: {
innerText,
content: innerText,
},
});
dom = instace.$mount(document.createElement("div")).$el;
} else {
dom = document.createElement("div");
dom.innerText = innerText;
}
el.innerHTML = "";
el.appendChild(dom);
},
});