feat(TextEllipsis): define text style and class, support more prop

heyui · Aug 29, 2019 · 6e31940 · 6e31940
1 parent 1007f7b
commit 6e31940
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 25 deletions.
diff --git a/doc/components/component/textellipsis.vue b/doc/components/component/textellipsis.vue
@@ -70,6 +70,27 @@
         <td>-</td>
         <td></td>
       </tr>
+      <tr>
+        <td>more</td>
+        <td>Text displayed when defining abbreviations, 1.25.0+</td>
+        <td>String</td>
+        <td>-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>textStyle</td>
+        <td>文字的style, 1.25.0+</td>
+        <td>String, Object, Array</td>
+        <td>-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>textClass</td>
+        <td>文字的class, 1.25.0+</td>
+        <td>String, Object, Array</td>
+        <td>-</td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TextEllipsis 事件</h3>

diff --git a/doc/components/demos/other/textellipsis5.vue b/doc/components/demos/other/textellipsis5.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
-    <TextEllipsis v-for="text of texts" :key="text" :text="text" :height="40" v-width="300" useTooltip tooltipTheme="white" placement="right">
-      <template slot="more">...</template>
+    <TextEllipsis v-for="text of texts" textClass="link" @click="go" :key="text" :text="text" more="..." :height="40" v-width="300" useTooltip tooltipTheme="white" placement="right">
     </TextEllipsis>
   </div>
 </template>
@@ -18,7 +17,9 @@ export default {
     };
   },
   methods: {
-
+    go() {
+      this.$Message('跳转');
+    }
   }
 };
 </script>
diff --git a/doc/components_en/component/textellipsis.vue b/doc/components_en/component/textellipsis.vue
@@ -70,6 +70,27 @@
         <td>-</td>
         <td></td>
       </tr>
+      <tr>
+        <td>more</td>
+        <td>定义缩略时展示的文字, 1.25.0+</td>
+        <td>String</td>
+        <td>-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>textStyle</td>
+        <td>text style, 1.25.0+</td>
+        <td>String, Object, Array</td>
+        <td>-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>textClass</td>
+        <td>text class, 1.25.0+</td>
+        <td>String, Object, Array</td>
+        <td>-</td>
+        <td></td>
+      </tr>
     </table>
 
     <h3>TextEllipsis Event</h3>

diff --git a/doc/components_en/demos/other/textellipsis5.vue b/doc/components_en/demos/other/textellipsis5.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <TextEllipsis v-for="text of texts" :key="text" :text="text" :height="40" v-width="300" useTooltip tooltipTheme="white" placement="right">
+    <TextEllipsis v-for="text of texts" :key="text" textClass="link" @click="go" :text="text" :height="40" v-width="300" useTooltip tooltipTheme="white" placement="right">
       <template slot="more">...</template>
     </TextEllipsis>
   </div>
@@ -16,6 +16,10 @@ export default {
       ]
     };
   },
-  methods: {}
+  methods: {
+    go() {
+      this.$Message('Jump');
+    }
+  }
 };
 </script>
diff --git a/src/components/text-ellipsis/textellipsis.vue b/src/components/text-ellipsis/textellipsis.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="h-text-ellipsis">
     <slot name="before" class="h-text-ellipsis-before"></slot>
-    <span class="h-text-ellipsis-limit-text" :key="keyIndex" v-tooltip="useTooltip&&isHide" :theme="tooltipTheme" :placement="placement" :content="text">{{text}}</span>
-    <span class="h-text-ellipsis-more" v-show='oversize'><slot name="more"></slot></span>
+    <span :style="textStyle" :class="textClass" @click="textClick" v-tooltip="useTooltip&&isHide" :theme="tooltipTheme" :placement="placement" :content="text">
+      <span class="h-text-ellipsis-limit-text" :key="keyIndex">{{text}}</span><span class="h-text-ellipsis-more" v-show='oversize'>{{more}}<slot name="more"></slot></span>
+    </span>
     <slot name="after" class="h-text-ellipsis-after"></slot>
   </div>
 </template>
@@ -22,7 +23,10 @@ export default {
       default: false
     },
     tooltipTheme: String,
-    placement: String
+    placement: String,
+    textStyle: [String, Object, Array],
+    textClass: [String, Object, Array],
+    more: String
   },
   data() {
     return {
@@ -55,6 +59,9 @@ export default {
         this.limitShow();
       }
     },
+    textClick() {
+      this.$emit('click');
+    },
     limitShow() {
       this.$nextTick(() => {
         let textDom = this.$el.querySelector('.h-text-ellipsis-limit-text');

diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
@@ -78,23 +78,6 @@ const getChooseNode = (data, options) => {
   return options;
 };
 
-const updateModeSomeChildChooseStatus = data => {
-  if (data.children) {
-    let isChoose = false;
-    for (let child of data.children) {
-      // updateChildStatus(child);
-      if (child.status.choose) {
-        isChoose = true;
-      }
-      updateModeSomeChildChooseStatus(child);
-    }
-    if (isChoose) {
-      data.status.choose = true;
-      data.status.opened = true;
-    }
-  }
-};
-
 export default {
   name: 'hTree',
   props: {