diff --git a/CHANGELOG.md b/CHANGELOG.md index 05ee74c87..b181b6acc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -423,7 +423,7 @@ CSS 类名规范: - Slider: 新增滑块输入组件,[官网 Slider](http://tdesign.tencent.com/vue/components/slider) - Radio: - - 新增 `variant` 属性用于控制单选框组件按钮形式,原有 `buttonStyle` 属性已废弃 + - 新增 `variant` 属性用于控制单选框组件按钮形式 - RadioOption 中的 `label` 和 `value` 更改为非必传, - Transfer: 新增树形内容展示支持,使用请参考官网 [样例](https://tdesign.tencent.com/vue/components/transfer#%E4%B8%8Etree%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8) - Table: diff --git a/examples/radio/radio.md b/examples/radio/radio.md index d26e6ea6f..9024aa73c 100644 --- a/examples/radio/radio.md +++ b/examples/radio/radio.md @@ -1,18 +1,17 @@ :: BASE_DOC :: ## API - ### Radio Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -allowUncheck | Boolean | false | 【开发中】是否允许取消选中 | N +allowUncheck | Boolean | false | 是否允许取消选中 | N checked | Boolean | - | 是否选中。支持语法糖 | N defaultChecked | Boolean | - | 是否选中。非受控属性 | N default | String / Slot / Function | - | 单选按钮内容,同 label。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N disabled | Boolean | undefined | 是否为禁用态 | N label | String / Slot / Function | - | 主文案。TS 类型:`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -name | String | - | HTM 元素原生属性 | N +name | String | - | HTML 元素原生属性 | N value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型:`RadioValue`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N onChange | Function | | 选中状态变化时触发。`(checked: boolean, context: { e: Event }) => {}` | N @@ -26,7 +25,6 @@ change | `(checked: boolean, context: { e: Event })` | 选中状态变化时触 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- -buttonStyle | String | outline | 已废弃。单选组件按钮形式(请使用 variant 代替)。可选项:outline/solid | N disabled | Boolean | undefined | 是否禁用全部子单选框 | N name | String | - | HTML 元素原生属性 | N options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时,表示 label 和 value 值相同。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N diff --git a/src/radio/group.tsx b/src/radio/group.tsx index 45ad08bf7..dd9e5c5b3 100644 --- a/src/radio/group.tsx +++ b/src/radio/group.tsx @@ -64,16 +64,12 @@ export default Vue.extend({ }); } - // TODO 移除 buttonStyle api, 改用 variant - if (this.buttonStyle === 'solid') { - console.error('TDesign Radio Warn: buttonStyle will be deprecated, please use `variant` instead.'); - } const groupClass = [`${name}`, SIZE_CLASSNAMES[this.size], { [`${name}__outline`]: this.variant === 'outline', - [`${name}--filled`]: this.buttonStyle === 'solid' || this.variant.includes('filled'), + [`${name}--filled`]: this.variant.includes('filled'), [`${name}--primary-filled`]: this.variant === 'primary-filled', }]; - if (this.buttonStyle === 'solid' || this.variant.includes('filled')) { + if (this.variant.includes('filled')) { children && children.push(
); } @@ -119,7 +115,7 @@ export default Vue.extend({ document.body.removeChild(div); }, calcBarStyle() { - if (this.buttonStyle !== 'solid' && this.variant === 'outline') return; + if (this.variant === 'outline') return; const checkedRadio: HTMLElement = this.$el.querySelector(this.checkedClassName); if (!checkedRadio) return; diff --git a/src/radio/props.ts b/src/radio/props.ts index 0c640c705..3b3579b1a 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -2,14 +2,14 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 16:59:59 + * updated at 2021-12-28 21:43:41 * */ import { TdRadioProps } from './type'; import { PropType } from 'vue'; export default { - /** 【开发中】是否允许取消选中 */ + /** 是否允许取消选中 */ allowUncheck: Boolean, /** 是否选中 */ checked: Boolean, @@ -28,7 +28,7 @@ export default { label: { type: [String, Function] as PropType, }, - /** HTM 元素原生属性 */ + /** HTML 元素原生属性 */ name: { type: String, default: '', diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index df1f64972..5233b5628 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -2,21 +2,13 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-11-19 10:44:26 + * updated at 2021-12-28 21:43:41 * */ import { TdRadioGroupProps } from '../radio/type'; import { PropType } from 'vue'; export default { - /** 已废弃。单选组件按钮形式(请使用 variant 代替) */ - buttonStyle: { - type: String as PropType, - default: 'outline' as TdRadioGroupProps['buttonStyle'], - validator(val: TdRadioGroupProps['buttonStyle']): boolean { - return ['outline', 'solid'].includes(val); - }, - }, /** 是否禁用全部子单选框 */ disabled: { type: Boolean, diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx index f88f3e7d1..a5b58b980 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -59,9 +59,10 @@ export default (Vue as VueConstructor).extend({ {renderContent(this, 'default', 'label')} @@ -78,5 +79,14 @@ export default (Vue as VueConstructor).extend({ emitEvent>(this, 'change', target.checked, { e }); } }, + handleClick(e: Event) { + this.$emit('click'); + if (!this.checked || !this.allowUncheck) return; + if (this.radioGroup) { + this.radioGroup.$emit('checked-change', undefined, { e }); + } else { + emitEvent>(this, 'change', false, { e }); + } + }, }, }); diff --git a/src/radio/type.ts b/src/radio/type.ts index ebfdce8dd..16331ba97 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -2,14 +2,14 @@ /** * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC - * updated at 2021-12-12 16:59:59 + * updated at 2021-12-28 21:43:41 * */ import { TNode, SizeEnum } from '../common'; export interface TdRadioProps { /** - * 【开发中】是否允许取消选中 + * 是否允许取消选中 * @default false */ allowUncheck?: boolean; @@ -34,7 +34,7 @@ export interface TdRadioProps { */ label?: string | TNode; /** - * HTM 元素原生属性 + * HTML 元素原生属性 * @default '' */ name?: string; @@ -46,15 +46,9 @@ export interface TdRadioProps { * 选中状态变化时触发 */ onChange?: (checked: boolean, context: { e: Event }) => void; -}; +} export interface TdRadioGroupProps { - /** - * 单选组件按钮形式(请使用 variant 代替) - * @default outline - * @deprecated - */ - buttonStyle?: 'outline' | 'solid'; /** * 是否禁用全部子单选框 */ @@ -90,7 +84,7 @@ export interface TdRadioGroupProps { * 选中值发生变化时触发 */ onChange?: (value: RadioValue, context: { e: Event }) => void; -}; +} export type RadioValue = string | number | boolean;