tooltip组件

src/utils/model/index.js

@@ -17,6 +17,7 @@ import myImageViewer from './imageViewer/index'
 import myUpload from './upload/index'
 import myCascader from './Cascader/index'
 import myNodeCopy from './nodeCopy/index'
+import myTooltip from './tooltip/index'
 
 var models = {
   myCustomSvg,
@@ -37,6 +38,7 @@ var models = {
   myUpload,
   myCascader,
   myNodeCopy,
+  myTooltip
 }
 export default {
   install(Vue) {

src/utils/model/route.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <upload :options="[
+    <Cascader :options="[
         {
           label:'事件1',
           value:'1'
@@ -11,18 +11,26 @@
         },
       ]">
       <i slot="reference" class="el-icon-circle-plus-outline" style="font-size:20px;"></i>
-    </upload>
+    </Cascader>
     <myUpload :multiple="true" :fileList="[{name:'场景可视化.jpg'}]" accept=".png,.jpg"></myUpload>
     <my-date value=""></my-date>
+    <myTooltop effect="dark" content="123" placement="top-start">
+      <div class="tooltip">你哈d </div>
+    </myTooltop>
+    <myTooltop effect="dark" content="123" placement="top-start">
+      <div class="tooltip">fdgfdfdfdgdddfddz fvfbvzd 宾馆饭店不放单放单 </div>
+    </myTooltop>
   </div>
 </template>
 <script>
-import upload from './Cascader/index.vue'
+import Cascader from './Cascader/index.vue'
 import myDate from './date/index.vue'
+import myTooltop from './tooltip/index.vue'
 export default {
   components:{
-    upload,
-    myDate
+    Cascader,
+    myDate,
+    myTooltop
   },
   data() {
     return {
@@ -39,3 +47,11 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+  .tooltip{
+    width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+</style>

src/utils/model/tooltip/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-tooltip class="item" :disabled="!disable" v-bind="$attrs" ref="myToolTip">
+    <template>
+        <slot></slot>
+    </template>
+      
+    </el-tooltip>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    disabled:Boolean
+  },
+  data() {
+    return {
+        disable:true
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.$refs.myToolTip.$el.addEventListener('mouseenter',this.mouseenter)
+  },
+  methods: {
+    mouseenter(e){
+        var target = e.target
+        const target_Width = target.scrollWidth;
+        const target_content_Width= target.clientWidth;
+        this.disable = target_Width > target_content_Width;
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>