diff --git a/src/check-tag/check-tag.less b/src/check-tag/check-tag.less index e24273ac6..a353c90c7 100644 --- a/src/check-tag/check-tag.less +++ b/src/check-tag/check-tag.less @@ -43,6 +43,8 @@ @tag-extra-large-height: var(--td-tag-extra-large-height, 80rpx); @tag-square-border-radius: var(--td-tag-square-border-radius, 8rpx); +@tag-round-border-radius: var(--td-tag-round-border-radius, 999px); +@tag-mark-border-radius: var(--td-tag-mark-border-radius, @tag-round-border-radius); .genVariant(@variant) { @themes: default, primary, success, warning, danger; @@ -132,6 +134,20 @@ } } + &.@{prefix}-tag { + &--square { + border-radius: @tag-square-border-radius; + } + + &--round { + border-radius: @tag-round-border-radius; + } + + &--mark { + border-radius: 0 @tag-mark-border-radius @tag-mark-border-radius 0; + } + } + &--dark { .genVariant(dark); &.@{prefix}-tag--default { diff --git a/src/check-tag/check-tag.ts b/src/check-tag/check-tag.ts index aa3aa692d..ffb1d58b9 100644 --- a/src/check-tag/check-tag.ts +++ b/src/check-tag/check-tag.ts @@ -49,7 +49,7 @@ export default class CheckTag extends SuperComponent { methods = { setClass() { const { classPrefix } = this.data; - const { size, variant, disabled, checked } = this.properties; + const { size, variant, disabled, checked, shape } = this.properties; const tagClass = [ classPrefix, `${classPrefix}--checkable`, @@ -58,6 +58,7 @@ export default class CheckTag extends SuperComponent { `${classPrefix}--${checked ? 'primary' : 'default'}`, `${classPrefix}--${size}`, `${classPrefix}--${variant}`, + `${classPrefix}--${shape}`, ]; const className = classNames(tagClass); this.setData({ @@ -72,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 index 6b671736e..7dbdb9ad2 100644 --- a/src/check-tag/check-tag.wxml +++ b/src/check-tag/check-tag.wxml @@ -12,4 +12,13 @@ {{checked ? content[0] : content[1]}} {{content}} + diff --git a/src/check-tag/props.ts b/src/check-tag/props.ts index e7e6e9dd8..2d062a598 100644 --- 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, @@ -43,7 +43,7 @@ const props: TdCheckTagProps = { icon: { type: null, }, - /** 已废弃。标签类型,有三种:方形、圆角方形、标记型 */ + /** 标签类型,有三种:方形、圆角方形、标记型 */ shape: { type: String, value: 'square', diff --git a/src/tag/README.en-US.md b/src/tag/README.en-US.md index 986c1f165..2c75fbf98 100644 --- a/src/tag/README.en-US.md +++ b/src/tag/README.en-US.md @@ -28,12 +28,12 @@ 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 icon | String / Object / Slot | - | \- | N -shape | String | square | `deprecated`。options:square/round/mark | N +shape | String | square | options:square/round/mark | N size | String | medium | options:small/medium/large。Typescript:`SizeEnum` | N variant | String | dark | `0.26.0`。options:dark/light/outline/light-outline | 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 index 96562c793..6868f9902 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -74,11 +74,11 @@ 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 -shape | String | square | 已废弃。标签类型,有三种:方形、圆角方形、标记型。可选项:square/round/mark | N +shape | String | square | 标签类型,有三种:方形、圆角方形、标记型。可选项:square/round/mark | N size | String | medium | 标签尺寸。可选项:small/medium/large。TS 类型:`SizeEnum` | N variant | String | dark | `0.26.0`。标签风格变体。可选项:dark/light/outline/light-outline | N @@ -88,6 +88,7 @@ variant | String | dark | `0.26.0`。标签风格变体。可选项:dark/light -- | -- | -- change | `(checked: boolean)` | 状态切换时触发 click | - | 点击标签时触发 +close | - | 如果关闭按钮存在,点击关闭按钮时触发 ### CheckTag 外部样式类 类名 | 说明