From b19d937fd8f1f0ff8b27b660966e3a4495b1d5ef Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 04 七月 2024 11:29:30 +0800
Subject: [PATCH] 高级表单优化
---
src/views/form-design/components/VFormDesign/components/FormProps.vue | 65 ++++++++++++++++----------------
1 files changed, 32 insertions(+), 33 deletions(-)
diff --git a/src/views/form-design/components/VFormDesign/components/FormProps.vue b/src/views/form-design/components/VFormDesign/components/FormProps.vue
index f170781..32a0c98 100644
--- a/src/views/form-design/components/VFormDesign/components/FormProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormProps.vue
@@ -42,10 +42,10 @@
</FormItem>
<div v-if="formConfig.labelLayout === 'Grid'">
<FormItem label="labelCol">
- <Slider v-model:value="formConfig.labelCol!.span" :max="24" />
+ <Slider v-model:value="sliderSpan" :max="24" />
</FormItem>
<FormItem label="wrapperCol">
- <Slider v-model:value="formConfig.wrapperCol!.span" :max="24" />
+ <Slider v-model:value="sliderSpan" :max="24" />
</FormItem>
<FormItem label="鏍囩瀵归綈">
@@ -65,7 +65,7 @@
</div>
<FormItem label="琛ㄥ崟灞炴��">
<Col
- ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout == 'horizontal'"
+ ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout === 'horizontal'"
>label鍚庨潰鏄剧ず鍐掑彿</Checkbox
></Col
>
@@ -75,39 +75,38 @@
</Form>
</div>
</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
+<script lang="ts" setup name="FormProps">
+ import { computed } from 'vue';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
- import { InputNumber, Slider, Checkbox, Col, RadioChangeEvent } from 'ant-design-vue';
- // import RadioButtonGroup from '/@/components/RadioButtonGroup.vue';
- import { Form, FormItem, Radio } from 'ant-design-vue';
- export default defineComponent({
- name: 'FormProps',
- components: {
- InputNumber,
- Slider,
- Checkbox,
- RadioGroup: Radio.Group,
- RadioButton: Radio.Button,
- Form,
- FormItem,
- Col,
- },
- setup() {
- const { formConfig } = useFormDesignState();
+ import {
+ InputNumber,
+ Slider,
+ Checkbox,
+ Col,
+ RadioChangeEvent,
+ Form,
+ FormItem,
+ RadioButton,
+ RadioGroup,
+ } from 'ant-design-vue';
- formConfig.value = formConfig.value || {
- labelCol: { span: 24 },
- wrapperCol: { span: 24 },
- };
+ const { formConfig } = useFormDesignState();
- const lableLayoutChange = (e: RadioChangeEvent) => {
- if (e.target.value === 'Grid') {
- formConfig.value.layout = 'horizontal';
- }
- };
+ formConfig.value = formConfig.value || {
+ labelCol: { span: 24 },
+ wrapperCol: { span: 24 },
+ };
- return { formConfig, lableLayoutChange };
- },
+ const lableLayoutChange = (e: RadioChangeEvent) => {
+ if (e.target.value === 'Grid') {
+ formConfig.value.layout = 'horizontal';
+ }
+ };
+
+ const sliderSpan = computed(() => {
+ if (formConfig.value.labelLayout) {
+ return Number(formConfig.value.labelCol!.span);
+ }
+ return 0;
});
</script>
--
Gitblit v1.9.3