fix: 数据失去响应式问题

peng-xiao-shuai · Nov 20, 2024 · 2dd6fad · 2dd6fad
1 parent 605bcba
commit 2dd6fad
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 35 deletions.
diff --git a/packages/components/f-checkbox.tsx b/packages/components/f-checkbox.tsx
@@ -20,7 +20,9 @@ export const FCheckbox = defineComponent({
   name: 'FCheckbox',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Checkbox>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Checkbox>
+    )
     const { event } = useEvent<FormTypeEnum.Checkbox>({
       formData: props.formData,
       index: props.index!,
@@ -31,18 +33,18 @@ export const FCheckbox = defineComponent({
       <>
         <ElCheckboxGroup
           v-model={props.formData[props.formItem.prop!]}
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           onChange={(...arg: any) => event('change', ...arg)}
           {...isProperty(
             {
               formData: props.formData,
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         >
-          {data?.options.map((checkbox) => (
+          {data.value?.options.map((checkbox) => (
             <ElCheckbox
               label={checkbox.label}
               disabled={isBolOrFun(checkbox.disabled, {

diff --git a/packages/components/f-date-picker.tsx b/packages/components/f-date-picker.tsx
@@ -18,7 +18,9 @@ export const FDatePicker = defineComponent({
   name: 'FDatePicker',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.DatePicker>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.DatePicker>
+    )
 
     const { event } = useEvent<FormTypeEnum.DatePicker>({
       formData: props.formData,
@@ -30,7 +32,7 @@ export const FDatePicker = defineComponent({
       <>
         <ElDatePicker
           v-model={props.formData[props.formItem.prop!]}
-          style={data?.style || (props.inline ? {} : { width: '100%' })}
+          style={data.value?.style || (props.inline ? {} : { width: '100%' })}
           // ElDatePicker 未提供事件类型，但是不影响正常使用
           start-placeholder="开始时间"
           end-placeholder="结束时间"
@@ -50,7 +52,7 @@ export const FDatePicker = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>

diff --git a/packages/components/f-input.tsx b/packages/components/f-input.tsx
@@ -18,7 +18,9 @@ export const FInput = defineComponent({
   props: componentProps(),
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Input>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Input>
+    )
 
     const { event } = useEvent<FormTypeEnum.Input>({
       formData: props.formData,
@@ -42,11 +44,11 @@ export const FInput = defineComponent({
       <>
         <ElInput
           v-slots={{
-            [data?.slot as string]: () => (
-              <span style={{ padding: '0 10px' }}>{data?.symbol}</span>
+            [data.value?.slot as string]: () => (
+              <span style={{ padding: '0 10px' }}>{data.value?.symbol}</span>
             ),
           }}
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           placeholder={`请输入${clearSymbol(props.formItem.text)}`}
           v-model={modelValue.value}
           onBlur={(...arg: any) => event('blur', ...arg)}
@@ -67,7 +69,7 @@ export const FInput = defineComponent({
                 index: props.index!,
                 formItem: props.formItem,
               },
-              data?.property
+              data.value?.property
             ),
           }}
         ></ElInput>

diff --git a/packages/components/f-radio.tsx b/packages/components/f-radio.tsx
@@ -19,7 +19,9 @@ export const FRadio = defineComponent({
   name: 'FRadio',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Radio>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Radio>
+    )
 
     const { event } = useEvent<FormTypeEnum.Radio>({
       formData: props.formData,
@@ -31,18 +33,18 @@ export const FRadio = defineComponent({
       <>
         <ElRadioGroup
           v-model={props.formData[props.formItem.prop!]}
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           onChange={(...arg: any) => event('change', ...arg)}
           {...isProperty(
             {
               formData: props.formData,
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         >
-          {data?.options.map((radio) => (
+          {data.value?.options.map((radio) => (
             <ElRadio
               label={radio.label}
               disabled={isBolOrFun(radio.disabled, {

diff --git a/packages/components/f-rate.tsx b/packages/components/f-rate.tsx
@@ -18,7 +18,9 @@ export const FRate = defineComponent({
   props: componentProps(),
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Rate>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Rate>
+    )
 
     const { event } = useEvent<FormTypeEnum.Rate>({
       formData: props.formData,
@@ -30,7 +32,7 @@ export const FRate = defineComponent({
       <>
         <ElRate
           v-model={props.formData[props.formItem.prop!]}
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           allow-half
           onChange={(arg: number) => {
             emit('update:modelValue', arg)
@@ -45,7 +47,7 @@ export const FRate = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>

diff --git a/packages/components/f-select.tsx b/packages/components/f-select.tsx
@@ -19,7 +19,9 @@ export const FSelect = defineComponent({
   name: 'FSelect',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Select>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Select>
+    )
 
     const { event } = useEvent<FormTypeEnum.Select>({
       formData: props.formData,
@@ -32,20 +34,21 @@ export const FSelect = defineComponent({
         <ElSelectV2
           v-model={props.formData[props.formItem.prop!]}
           style={
-            data?.style ||
+            data.value?.style ||
             (props.inline ? { width: '192px' } : { width: '100%' })
           }
-          options={data?.options || []}
+          options={data.value?.options || []}
           onChange={(...arg: any) => {
             event('change', ...arg)
           }}
           placeholder={`请选择${clearSymbol(props.formItem.text)}`}
           v-slots={{
             default: () =>
-              data?.slots?.default?.(h, props.formData, props.index!),
-            empty: () => data?.slots?.empty?.(h, props.formData, props.index!),
+              data.value?.slots?.default?.(h, props.formData, props.index!),
+            empty: () =>
+              data.value?.slots?.empty?.(h, props.formData, props.index!),
             prefix: () =>
-              data?.slots?.prefix?.(h, props.formData, props.index!),
+              data.value?.slots?.prefix?.(h, props.formData, props.index!),
           }}
           clearable
           {...isProperty(
@@ -54,7 +57,7 @@ export const FSelect = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>

diff --git a/packages/components/f-switch.tsx b/packages/components/f-switch.tsx
@@ -16,7 +16,9 @@ export const FSwitch = defineComponent({
   name: 'FSwitch',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.Switch>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.Switch>
+    )
 
     const { event } = useEvent<FormTypeEnum.Switch>({
       formData: props.formData,
@@ -27,7 +29,7 @@ export const FSwitch = defineComponent({
     return () => (
       <>
         <ElSwitch
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           v-model={props.formData[props.formItem.prop!]}
           active-value={'1'}
           inactive-value={'0'}
@@ -40,7 +42,7 @@ export const FSwitch = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>

diff --git a/packages/components/f-upload-file.tsx b/packages/components/f-upload-file.tsx
@@ -16,7 +16,9 @@ export const FUploadFile = defineComponent({
   name: 'FUploadFile',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.UploadFile>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.UploadFile>
+    )
 
     const { event } = useEvent<FormTypeEnum.UploadFile>({
       formData: props.formData,
@@ -26,7 +28,7 @@ export const FUploadFile = defineComponent({
     return () => (
       <>
         <UploadFile
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           onUploadFileSuccess={(...arg: any) => {
             event('upload-file-success', ...arg)
           }}
@@ -39,7 +41,7 @@ export const FUploadFile = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>

diff --git a/packages/components/f-upload-media.tsx b/packages/components/f-upload-media.tsx
@@ -16,7 +16,9 @@ export const FUploadMedia = defineComponent({
   name: 'FUploadMedia',
   props: componentProps(),
   setup(props) {
-    const data = props.formItem.data as SetDataType<FormTypeEnum.UploadMedia>
+    const data = computed(
+      () => props.formItem.data as SetDataType<FormTypeEnum.UploadMedia>
+    )
 
     const { event } = useEvent<FormTypeEnum.UploadMedia>({
       formData: props.formData,
@@ -26,7 +28,7 @@ export const FUploadMedia = defineComponent({
     return () => (
       <>
         <UploadMedia
-          style={data?.style || {}}
+          style={data.value?.style || {}}
           onFilesChange={(...arg: any) => {
             event('files-change', ...arg)
           }}
@@ -36,7 +38,7 @@ export const FUploadMedia = defineComponent({
               index: props.index!,
               formItem: props.formItem,
             },
-            data?.property
+            data.value?.property
           )}
         />
       </>