feat(check-tag): enable props closable

Tencent · Sep 20, 2023 · 17ef47a · 17ef47a
1 parent ec18136
commit 17ef47a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/src/check-tag/check-tag.ts b/src/check-tag/check-tag.ts
@@ -73,5 +73,10 @@ export default class CheckTag extends SuperComponent {
       this._trigger('click');
       this._trigger('change', { checked: !checked });
     },
+
+    onClose(e: WechatMiniprogram.BaseEvent) {
+      if (this.data.disabled) return;
+      this._trigger('close', e);
+    },
   };
 }
diff --git a/src/check-tag/check-tag.wxml b/src/check-tag/check-tag.wxml
@@ -12,4 +12,13 @@
     <block wx:if="{{_.isArray(content) && content.length == 2}}">{{checked ? content[0] : content[1]}}</block>
     <block wx:else>{{content}}</block>
   </view>
+  <t-icon
+    wx:if="{{ closable }}"
+    class="{{classPrefix}}__icon-close"
+    t-class="{{prefix}}-icon"
+    catch:tap="onClose"
+    name="close"
+    aria-role="button"
+    aria-label="关闭"
+  />
 </view>
diff --git a/src/check-tag/props.ts b/src/check-tag/props.ts
@@ -16,7 +16,7 @@ const props: TdCheckTagProps = {
     type: null,
     value: undefined,
   },
-  /** 已废弃。标签是否可关闭 */
+  /** 标签是否可关闭 */
   closable: {
     type: Boolean,
     value: false,

diff --git a/src/tag/README.en-US.md b/src/tag/README.en-US.md
@@ -28,7 +28,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 checked | Boolean | undefined | \- | N
 default-checked | Boolean | undefined | uncontrolled property | N
-closable | Boolean | false | `deprecated` | N
+closable | Boolean | false | \- | N
 content | String / Number / Array / Slot | - | Typescript：`string \| number \| string[]` | N
 disabled | Boolean | false | \- | N
 external-classes | Array | - | `['t-class']` | N
@@ -43,6 +43,7 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean)` | \-
 click | - | \-
+close | - | \-
 
 
 ### CSS Variables

diff --git a/src/tag/README.md b/src/tag/README.md
@@ -74,7 +74,7 @@ t-class | 根节点样式类
 -- | -- | -- | -- | --
 checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N
 default-checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
-closable | Boolean | false | 已废弃。标签是否可关闭 | N
+closable | Boolean | false | 标签是否可关闭 | N
 content | String / Number / Array / Slot | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[]` | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | String / Object / Slot | - | 标签图标 | N
@@ -88,6 +88,7 @@ variant | String | dark | `0.26.0`。标签风格变体。可选项：dark/light
 -- | -- | --
 change | `(checked: boolean)` | 状态切换时触发
 click | - | 点击标签时触发
+close | - | 如果关闭按钮存在，点击关闭按钮时触发
 
 ### CheckTag 外部样式类
 类名 | 说明