first commit
This commit is contained in:
lingxiao865
68
uni_modules/tdesign-uniapp/components/radio-group/props.ts
Normal file
68
uni_modules/tdesign-uniapp/components/radio-group/props.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { TdRadioGroupProps } from './type';
|
||||
export default {
|
||||
/** 是否允许取消选中 */
|
||||
allowUncheck: Boolean,
|
||||
/** 是否开启无边框模式 */
|
||||
borderless: Boolean,
|
||||
/** 是否禁用全部子单选框 */
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 */
|
||||
icon: {
|
||||
type: [String, Array],
|
||||
default: 'circle' as TdRadioGroupProps['icon'],
|
||||
},
|
||||
/** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
|
||||
keys: {
|
||||
type: Object,
|
||||
},
|
||||
/** HTML 元素原生属性 */
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同 */
|
||||
options: {
|
||||
type: Array,
|
||||
},
|
||||
/** 复选框和内容相对位置。优先级低于 Radio.placement */
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'left' as TdRadioGroupProps['placement'],
|
||||
validator(val: TdRadioGroupProps['placement']): boolean {
|
||||
if (!val) return true;
|
||||
return ['left', 'right'].includes(val);
|
||||
},
|
||||
},
|
||||
/** 只读状态 */
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
/** -1 时代表独立，不再寻找 parent，用于头条小程序 */
|
||||
relationKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/** 选中的值 */
|
||||
value: {
|
||||
type: [String, Number, Boolean],
|
||||
},
|
||||
/** 选中的值，非受控属性 */
|
||||
defaultValue: {
|
||||
type: [String, Number, Boolean],
|
||||
},
|
||||
/** 选中值发生变化时触发 */
|
||||
onChange: {
|
||||
type: Function,
|
||||
default: () => ({}),
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<view
|
||||
:style="tools._style([customStyle])"
|
||||
:class="classPrefix + ' ' + tClass"
|
||||
aria-role="radiogroup"
|
||||
>
|
||||
<slot />
|
||||
<t-radio
|
||||
v-for="(item, index) in radioOptions"
|
||||
:key="index"
|
||||
:ref="prefix + '-radio-option'"
|
||||
:class="prefix + '-radio-option'"
|
||||
:data-index="index"
|
||||
:data-value="item.value"
|
||||
:data-allow-uncheck="item.allowUncheck || allowUncheck"
|
||||
:block="item.block || true"
|
||||
:label="item.label || ''"
|
||||
:value="item.value"
|
||||
:checked="item.checked || false"
|
||||
:content="item.content || ''"
|
||||
:allow-uncheck="item.allowUncheck || allowUncheck"
|
||||
:content-disabled="item.contentDisabled || false"
|
||||
:readonly="item.readonly || false"
|
||||
:disabled="item.disabled || false"
|
||||
:icon="item.icon || icon"
|
||||
:placement="item.placement || placement"
|
||||
:max-content-row="item.maxContentRow || 5"
|
||||
:max-label-row="item.maxLabelRow || 3"
|
||||
:name="item.name || ''"
|
||||
:borderless="borderless"
|
||||
:relation-key="relationKey"
|
||||
@change="handleRadioChange($event, { index, value: item.value, allowUncheck: item.allowUncheck || allowUncheck })"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import TRadio from '../radio/radio';
|
||||
import { prefix } from '../common/config';
|
||||
import { coalesce } from '../common/utils';
|
||||
import { uniComponent } from '../common/src/index';
|
||||
import props from './props';
|
||||
import tools from '../common/utils.wxs';
|
||||
import { ParentMixin, RELATION_MAP } from '../common/relation';
|
||||
|
||||
|
||||
const name = `${prefix}-radio-group`;
|
||||
|
||||
|
||||
export default uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: 'shared',
|
||||
},
|
||||
controlledProps: [
|
||||
{
|
||||
key: 'value',
|
||||
event: 'change',
|
||||
},
|
||||
],
|
||||
externalClasses: [
|
||||
`${prefix}-class`,
|
||||
],
|
||||
inject: {
|
||||
[RELATION_MAP.FormKey]: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
mixins: [ParentMixin(RELATION_MAP.Radio)],
|
||||
components: {
|
||||
TRadio,
|
||||
},
|
||||
props: {
|
||||
...props,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
radioOptions: [],
|
||||
tools,
|
||||
|
||||
dataValue: coalesce(this.value, this.defaultValue),
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(v) {
|
||||
this.dataValue = v;
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
dataValue: {
|
||||
handler(v) {
|
||||
this.getChildren()?.forEach((item) => {
|
||||
item.dataChecked = v === item.value;
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
options: {
|
||||
handler() {
|
||||
this.initWithOptions();
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
disabled: {
|
||||
handler(v) {
|
||||
if (this.options?.length) {
|
||||
this.initWithOptions();
|
||||
return;
|
||||
}
|
||||
this.getChildren()?.forEach((item) => {
|
||||
item.setDisabled(v);
|
||||
});
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.getChildren()?.forEach((item) => {
|
||||
item.dataChecked = this.dataValue === item.value;
|
||||
item.setDisabled(this.disabled);
|
||||
});
|
||||
}, 33);
|
||||
},
|
||||
methods: {
|
||||
innerAfterLinked(target) {
|
||||
const { value, disabled, readonly } = this;
|
||||
target.dataChecked = value === target.value;
|
||||
|
||||
target.setDisabled(disabled);
|
||||
target.setReadonly(readonly);
|
||||
},
|
||||
getChildren() {
|
||||
let items = this.children;
|
||||
|
||||
if (!items?.length) {
|
||||
items = this.$refs[`.${prefix}-radio-option`];
|
||||
}
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
updateValue(value) {
|
||||
this._trigger('change', { value });
|
||||
|
||||
this.onChange(value);
|
||||
},
|
||||
|
||||
handleRadioChange(tools, { value, index, allowUncheck, checked }) {
|
||||
this._trigger('change', checked === false && allowUncheck ? { value: null, index } : { value, index });
|
||||
},
|
||||
|
||||
onChange(value) {
|
||||
if (this[RELATION_MAP.FormKey]
|
||||
&& this[RELATION_MAP.FormKey].onValueChange) {
|
||||
this[RELATION_MAP.FormKey].onValueChange(value);
|
||||
}
|
||||
},
|
||||
|
||||
// 支持自定义options
|
||||
initWithOptions() {
|
||||
const { options, value, keys, disabled, readonly } = this;
|
||||
// 数字数组｜字符串数组｜对像数组
|
||||
if (!options?.length || !Array.isArray(options)) {
|
||||
this.radioOptions = [];
|
||||
return;
|
||||
}
|
||||
const optionsValue = [];
|
||||
try {
|
||||
options.forEach((element) => {
|
||||
const typeName = typeof element;
|
||||
if (typeName === 'number' || typeName === 'string') {
|
||||
optionsValue.push({
|
||||
label: `${element}`,
|
||||
value: element,
|
||||
checked: value === element,
|
||||
disabled,
|
||||
readonly,
|
||||
});
|
||||
} else if (typeName === 'object') {
|
||||
optionsValue.push({
|
||||
...element,
|
||||
label: element[coalesce(keys?.label, 'label')],
|
||||
value: element[coalesce(keys?.value, 'value')],
|
||||
checked: value === element[coalesce(keys?.value, 'value')],
|
||||
disabled: element.disabled || disabled,
|
||||
readonly: element.readonly || readonly,
|
||||
});
|
||||
}
|
||||
});
|
||||
this.radioOptions = optionsValue;
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
79
uni_modules/tdesign-uniapp/components/radio-group/type.ts
Normal file
79
uni_modules/tdesign-uniapp/components/radio-group/type.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
/* eslint-disable */
|
||||
|
||||
/**
|
||||
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
|
||||
* */
|
||||
|
||||
import type { RadioValue } from '../radio/type';
|
||||
import type { KeysType } from '../common/common';
|
||||
|
||||
export interface TdRadioGroupProps<T = RadioValue> {
|
||||
/**
|
||||
* 是否允许取消选中
|
||||
* @default false
|
||||
*/
|
||||
allowUncheck?: boolean;
|
||||
/**
|
||||
* 是否开启无边框模式
|
||||
* @default false
|
||||
*/
|
||||
borderless?: boolean;
|
||||
/**
|
||||
* 是否禁用全部子单选框
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效
|
||||
* @default 'circle'
|
||||
*/
|
||||
icon?: 'circle' | 'line' | 'dot' | Array<string>;
|
||||
/**
|
||||
* 用来定义 value / label / disabled 在 `options` 中对应的字段别名
|
||||
*/
|
||||
keys?: KeysType;
|
||||
/**
|
||||
* HTML 元素原生属性
|
||||
* @default ''
|
||||
*/
|
||||
name?: string;
|
||||
/**
|
||||
* 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同
|
||||
*/
|
||||
options?: Array<RadioOption>;
|
||||
/**
|
||||
* 复选框和内容相对位置。优先级低于 Radio.placement
|
||||
* @default left
|
||||
*/
|
||||
placement?: 'left' | 'right';
|
||||
/**
|
||||
* 只读状态
|
||||
*/
|
||||
readonly?: boolean;
|
||||
/**
|
||||
* -1 时代表独立，不再寻找 parent，用于头条小程序
|
||||
* @default ''
|
||||
*/
|
||||
relationKey?: string;
|
||||
/**
|
||||
* 选中的值
|
||||
*/
|
||||
value?: T;
|
||||
/**
|
||||
* 选中的值，非受控属性
|
||||
*/
|
||||
defaultValue?: T;
|
||||
/**
|
||||
* 选中值发生变化时触发
|
||||
*/
|
||||
onChange?: (context: { value: RadioValue }) => void;
|
||||
}
|
||||
|
||||
export type RadioOption = string | number | RadioOptionObj;
|
||||
|
||||
export interface RadioOptionObj {
|
||||
label?: string;
|
||||
value?: string | number;
|
||||
readonly?: boolean;
|
||||
disabled?: boolean;
|
||||
allowUncheck?: boolean;
|
||||
}
|
||||
Reference in New Issue
Block a user