feat(Tag): closable attributes support object type (#2590)

* feat(Tag): closable attributes support object type * test: update snapshots
Tencent · Feb 5, 2024 · 040aeb0 · 040aeb0
1 parent b202baf
commit 040aeb0
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/src/tag/README.md b/src/tag/README.md
@@ -47,7 +47,7 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-closable | Boolean | false | 标签是否可关闭 | N
+closable | Boolean / Object / Slot | false | 标签是否可关闭。 | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | String / Object / Slot | - | 标签中的图标，可自定义图标呈现 | N
 max-width | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80 | N

diff --git a/src/tag/__test__/index.test.js b/src/tag/__test__/index.test.js
@@ -254,7 +254,7 @@ describe('tag', () => {
 
         if (!VIRTUAL_HOST) {
           const $click = comp.querySelector('.base >>> .t-tag');
-          const $close = comp.querySelector('.base >>> .t-tag__icon-close');
+          const $close = comp.querySelector('.base >>> .t-icon');
 
           // 禁用态：event 不会触发
           $click.dispatchEvent('tap');

diff --git a/src/tag/props.ts b/src/tag/props.ts
@@ -8,7 +8,7 @@ import { TdTagProps } from './type';
 const props: TdTagProps = {
   /** 标签是否可关闭 */
   closable: {
-    type: Boolean,
+    type: null,
     value: false,
   },
   /** 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 */

diff --git a/src/tag/tag.ts b/src/tag/tag.ts
@@ -45,6 +45,12 @@ export default class Tag extends SuperComponent {
         _icon: calcIcon(v),
       });
     },
+
+    closable(v) {
+      this.setData({
+        _closable: calcIcon(v, 'close'),
+      });
+    },
   };
 
   methods = {

diff --git a/src/tag/tag.wxml b/src/tag/tag.wxml
@@ -13,13 +13,11 @@
   <view class="{{classPrefix}}__text">
     <slot />
   </view>
-  <t-icon
-    wx:if="{{ closable }}"
-    class="{{classPrefix}}__icon-close"
-    t-class="{{prefix}}-icon"
+  <template
+    wx:if="{{_closable}}"
+    is="icon"
+    data="{{class: classPrefix + '__icon-close', tClass: prefix + '-icon', bindclick: 'handleClose',  ariaRole: 'button', ariaLabel: '关闭',  ..._closable }}"
     catch:tap="handleClose"
-    name="close"
-    aria-role="button"
-    aria-label="关闭"
   />
+  <slot wx:else name="closable" />
 </view>
diff --git a/src/tag/type.ts b/src/tag/type.ts
@@ -12,8 +12,8 @@ export interface TdTagProps {
    * @default false
    */
   closable?: {
-    type: BooleanConstructor;
-    value?: boolean;
+    type: null;
+    value?: boolean | object;
   };
   /**
    * 自定义组件样式