feat(Form): 集成Radio，增加disabled&size&校验 (DevCloudFE#831)

Author: xingyan95

packages/devui-vue/devui/radio/src/use-radio.ts

@@ -1,12 +1,15 @@
-import { computed, inject, SetupContext, toRef, provide } from 'vue';
+import { computed, inject, SetupContext, toRef, provide, watch } from 'vue';
+import { FORM_TOKEN, FORM_ITEM_TOKEN } from '../../form';
 import { RadioProps, RadioGroupProps, radioGroupInjectionKey, UseRadioFn, valueTypes, UseRadioButtonFn } from './radio-types';
 
 export function useRadio(props: RadioProps, ctx: SetupContext): UseRadioFn {
+ const formContext = inject(FORM_TOKEN, undefined);
+ const formItemContext = inject(FORM_ITEM_TOKEN, undefined);
  const radioGroupConf = inject(radioGroupInjectionKey, null);
 
  /** 是否禁用 */
  const isDisabled = computed(() => {
- return props.disabled || radioGroupConf?.disabled.value;
+ return formContext?.disabled || props.disabled || radioGroupConf?.disabled.value;
  });
  /** 判断是否勾选 */
  const isChecked = computed(() => {
@@ -57,8 +60,14 @@ export function useRadio(props: RadioProps, ctx: SetupContext): UseRadioFn {
  });
 
  const size = computed(() => {
- return radioGroupConf?.size.value || props.size;
+ return formContext?.size || radioGroupConf?.size.value || props.size;
  });
+ watch(
+ () => props.modelValue,
+ () => {
+ formItemContext?.validate('change').catch((err) => console.warn(err));
+ }
+ );
  return {
  isChecked,
  radioName,
@@ -70,12 +79,20 @@ export function useRadio(props: RadioProps, ctx: SetupContext): UseRadioFn {
 }
 
 export function useRadioGroup(props: RadioGroupProps, ctx: SetupContext): void {
+ const formItemContext = inject(FORM_ITEM_TOKEN, undefined);
  /** change 事件 */
  const emitChange = (radioValue: valueTypes) => {
  ctx.emit('update:modelValue', radioValue);
  ctx.emit('change', radioValue);
  };
 
+ watch(
+ () => props.modelValue,
+ () => {
+ formItemContext?.validate('change').catch((err) => console.warn(err));
+ }
+ );
+
  // 注入给子组件
  provide(radioGroupInjectionKey, {
  modelValue: toRef(props, 'modelValue'),

packages/devui-vue/docs/components/form/index.md

@@ -433,7 +433,7 @@ export default defineComponent({
 
 ```vue
 <template>
- <d-form ref="formRef" layout="vertical" :data="formData" :rules="rules" show-feedback>
+ <d-form ref="formRef" layout="vertical" :data="formData" :rules="rules" show-feedback message-type="text">
  <d-form-item
  field="username"
  :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
@@ -448,6 +448,13 @@ export default defineComponent({
  <d-form-item field="age" label="年龄">
  <d-input v-model="formData.age" />
  </d-form-item>
+ <d-form-item field="radio" label="Radio">
+ <d-radio-group direction="row" v-model="formData.radio">
+ <d-radio value="0">Manual execution</d-radio>
+ <d-radio value="1">Daily execution</d-radio>
+ <d-radio value="2">Weekly execution</d-radio>
+ </d-radio-group>
+ </d-form-item>
  <d-form-item field="executionDay" label="Execution day">
  <d-checkbox-group v-model="formData.executionDay" label="Execution day" direction="row">
  <d-checkbox label="Mon" value="Mon" />
@@ -478,6 +485,7 @@ export default defineComponent({
  userInfo: '',
  age: '',
  executionDay: [],
+ radio: '',
  });
  const checkAge = (rule, value, callback) => {
  if (!value) {
@@ -496,6 +504,7 @@ export default defineComponent({
  userInfo: [{ required: true, message: '用户信息不能为空', trigger: 'blur' }],
  age: [{ validator: checkAge }],
  executionDay: [{ type: 'array', required: true, message: '请至少选择一个执行时间', trigger: 'change' }],
+ radio: [{ required: true, message: '请选择', trigger: 'change' }],
  };
 
  const onClick = () => {