feat(TextEllipsis): use Tooltip when hide

heyui · Jul 28, 2018 · 7e21c9e · 7e21c9e
1 parent 36f8576
commit 7e21c9e
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 3 deletions.
diff --git a/doc/components/component/other/textellipsis.vue b/doc/components/component/other/textellipsis.vue
@@ -14,6 +14,9 @@
 
     <h3>适应换行</h3>
     <example demo="other/textellipsis4"></example>
+
+    <h3>当被隐藏文字的时候，使用tooltip提示</h3>
+    <example demo="other/textellipsis5"></example>
 
 
     <h3>TextEllipsis 参数</h3>
@@ -46,6 +49,20 @@
         <td>-</td>
         <td>true</td>
       </tr>
+      <tr>
+        <td>useTooltip</td>
+        <td>是否使用tooltip</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
+      <tr>
+        <td>tooltipTheme</td>
+        <td>tooltip的风格</td>
+        <td>String</td>
+        <td>-</td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TextEllipsis 事件</h3>

diff --git a/doc/components/demos/demos.js b/doc/components/demos/demos.js
@@ -241,6 +241,7 @@ export default {
   'otherTextellipsis2': resolve => require.ensure([], require => require('./other/textellipsis2'), 'other'),
   'otherTextellipsis3': resolve => require.ensure([], require => require('./other/textellipsis3'), 'other'),
   'otherTextellipsis4': resolve => require.ensure([], require => require('./other/textellipsis4'), 'other'),
+  'otherTextellipsis5': resolve => require.ensure([], require => require('./other/textellipsis5'), 'other'),
   'otherAffix1': resolve => require.ensure([], require => require('./other/affix1'), 'other'),
   'otherAffix2': resolve => require.ensure([], require => require('./other/affix2'), 'other'),
   'otherAffix3': resolve => require.ensure([], require => require('./other/affix3'), 'other'),

diff --git a/doc/components/demos/other/textellipsis5.vue b/doc/components/demos/other/textellipsis5.vue
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <TextEllipsis v-for="text of texts" :key="text" :text="text" :height="40" v-width="300" useTooltip>
+      <template slot="more">...</template>
+    </TextEllipsis>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      texts: [
+        "超级长超级长的公司名称超级长超级长超级长超级长",
+        "有创意的公司名字",
+      ]
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
diff --git a/doc/components_en/component/other/textellipsis.vue b/doc/components_en/component/other/textellipsis.vue
@@ -14,6 +14,9 @@
 
     <h3>Adapt to line breaks</h3>
     <example demo="other/textellipsis4"></example>
+
+    <h3>use tooltip when hide</h3>
+    <example demo="other/textellipsis5"></example>
 
 
     <h3>TextEllipsis Property</h3>
@@ -46,6 +49,20 @@
         <td>-</td>
         <td>true</td>
       </tr>
+      <tr>
+        <td>useTooltip</td>
+        <td>use tooltip when text hide</td>
+        <td>Boolean</td>
+        <td>-</td>
+        <td>false</td>
+      </tr>
+      <tr>
+        <td>tooltipTheme</td>
+        <td>tooltip theme</td>
+        <td>String</td>
+        <td>-</td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TextEllipsis Event</h3>

diff --git a/src/components/textellipsis/textellipsis.vue b/src/components/textellipsis/textellipsis.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-text-ellipsis">
     <slot name="before" class="h-text-ellipsis-before"></slot>
-    <span class="text-ellipsis-limit-text" :key="keyIndex">{{text}}</span>
+    <span class="text-ellipsis-limit-text" :key="keyIndex" v-tooltip="useTooltip&&isHide" :theme="tooltipTheme" :content="text">{{text}}</span>
     <span class="h-text-ellipsis-more" v-show='oversize'><slot name="more"></slot></span>
     <slot name="after" class="h-text-ellipsis-after"></slot>
   </div>
@@ -17,12 +17,18 @@ export default {
     isLimitHeight: {
       type: Boolean,
       default: true
-    }
+    },
+    useTooltip: {
+      type: Boolean,
+      default: false
+    },
+    tooltipTheme: String
   },
   data() {
     return {
       keyIndex: 0,
-      oversize: false
+      oversize: false,
+      isHide: false
     };
   },
   watch: {
@@ -64,8 +70,10 @@ export default {
               n--;
             }
             this.$emit('hide');
+            this.isHide = true;
           } else {
             this.$emit('show');
+            this.isHide = false;
           }
         }
       })