Merge pull request #450 from Godlike-meteor/fix/tree-select/tag

fix(tree-select): multiple tree-select compatible for long-text
Tencent · Feb 23, 2022 · 945a50d · 945a50d
2 parents 90e4844 + cb5f212
commit 945a50d
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 21 deletions.
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
@@ -415,6 +415,8 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
               size={this.size}
               closable={!this.tDisabled}
               disabled={this.tDisabled}
+              maxWidth={300}
+              title={label}
               onClose={(e: MouseEvent) => this.removeTag(index, null, e)}
             >
               {label}

diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap
@@ -14788,7 +14788,11 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/base.vue correct
 exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue correctly 1`] = `
 <div class="tdesign-tree-select-collapsed">
   <div class="demo-space t-select__wrap">
-    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">+1</span>
+    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span title="guangzhou" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">guangzhou</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span title="shenzhen" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close" style="display:none;"><span class="t-tag--text" style="max-width:300px;">shenzhen</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">+1</span>
       <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" unselectable="off" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
       </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
@@ -14802,7 +14806,11 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/collapsed.vue co
     </div>
   </div>
   <div class="t-select__wrap">
-    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close" style="display:none;">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">更多...</span>
+    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span title="guangzhou" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">guangzhou</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span title="shenzhen" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close" style="display:none;"><span class="t-tag--text" style="max-width:300px;">shenzhen</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark">更多...</span>
       <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" unselectable="off" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
       </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
@@ -14883,7 +14891,11 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/lazy.vue correct
 exports[`ssr snapshot test renders ./examples/tree-select/demos/multiple.vue correctly 1`] = `
 <div class="tdesign-tree-select-multiple">
   <div class="t-select__wrap">
-    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
+    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span title="guangzhou" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">guangzhou</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span title="shenzhen" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">shenzhen</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
       <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" unselectable="off" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
       </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">
@@ -14986,7 +14998,11 @@ exports[`ssr snapshot test renders ./examples/tree-select/demos/valuetype.vue co
     </div>
   </div>
   <div class="tree-select-multiple t-select__wrap">
-    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">undefined<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
+    <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display:none;">请选择</span><span title="[object Object]" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">undefined</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span title="[object Object]" class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"><span class="t-tag--text" style="max-width:300px;">undefined</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+        <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+      </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display:none;">+2</span>
       <div class="t-input t-size-m t-select__input" style="display:none;"><input placeholder="" type="text" unselectable="off" value="" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size:medium;">
         <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
       </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display:none;">

diff --git a/test/unit/tree-select/__snapshots__/demo.test.js.snap b/test/unit/tree-select/__snapshots__/demo.test.js.snap
@@ -109,9 +109,15 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
         请选择
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="guangzhou"
       >
-        guangzhou
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          guangzhou
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -127,10 +133,16 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
         </svg>
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
         style="display: none;"
+        title="shenzhen"
       >
-        shenzhen
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          shenzhen
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -232,9 +244,15 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
         请选择
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="guangzhou"
       >
-        guangzhou
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          guangzhou
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -250,10 +268,16 @@ exports[`TreeSelect collapsed demo works fine 1`] = `
         </svg>
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
         style="display: none;"
+        title="shenzhen"
       >
-        shenzhen
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          shenzhen
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -601,9 +625,15 @@ exports[`TreeSelect multiple demo works fine 1`] = `
         请选择
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="guangzhou"
       >
-        guangzhou
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          guangzhou
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -619,9 +649,15 @@ exports[`TreeSelect multiple demo works fine 1`] = `
         </svg>
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="shenzhen"
       >
-        shenzhen
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          shenzhen
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -1025,9 +1061,15 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
         请选择
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="[object Object]"
       >
-        undefined
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          undefined
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"
@@ -1043,9 +1085,15 @@ exports[`TreeSelect valuetype demo works fine 1`] = `
         </svg>
       </span>
       <span
-        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close"
+        class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close"
+        title="[object Object]"
       >
-        undefined
+        <span
+          class="t-tag--text"
+          style="max-width: 300px;"
+        >
+          undefined
+        </span>
         <svg
           class="t-icon t-icon-close t-tag__icon-close"
           fill="none"

diff --git a/test/unit/tree-select/__snapshots__/index.test.js.snap b/test/unit/tree-select/__snapshots__/index.test.js.snap
@@ -19,7 +19,11 @@ exports[`TreeSelect :props :clearable 1`] = `
 
 exports[`TreeSelect :props :defaultValue 1`] = `
 <div class="t-select__wrap">
-  <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display: none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">shenzhen<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--close">guangzhou<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close"><path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path></svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+2</span>
+  <div class="t-select t-size-m t-select-selected t-select__popup-reference"><span class="t-select__placeholder" style="display: none;">请选择</span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close" title="shenzhen"><span class="t-tag--text" style="max-width: 300px;">shenzhen</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+      <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+    </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark t-tag--ellipsis t-tag--close" title="guangzhou"><span class="t-tag--text" style="max-width: 300px;">guangzhou</span><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close">
+      <path fill="currentColor" d="M8 8.92L11.08 12l.92-.92L8.92 8 12 4.92 11.08 4 8 7.08 4.92 4 4 4.92 7.08 8 4 11.08l.92.92L8 8.92z" fill-opacity="0.9"></path>
+    </svg></span><span class="t-tag t-tag--default t-size-m t-tag--dark" style="display: none;">+2</span>
     <div class="t-input t-size-m t-select__input" style="display: none;"><input placeholder="" type="text" unselectable="off" class="t-input__inner"></div><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="t-fake-arrow t-select__right-icon" style="font-size: medium;">
       <path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path>
     </svg><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-close-circle-filled t-size-m t-select__right-icon t-select__right-icon-clear" style="display: none;">