fix: 修复Form已知问题
This commit is contained in:
kailong321200875
parent
289c1c2cf5
commit
097b32e1a9
38
package.json
38
package.json
|
|
@ -27,10 +27,10 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@iconify/iconify": "^3.1.0",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@vueuse/core": "^10.2.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.10",
|
||||
"@zxcvbn-ts/core": "^3.0.1",
|
||||
"@zxcvbn-ts/core": "^3.0.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.4.0",
|
||||
"dayjs": "^1.11.8",
|
||||
|
|
@ -42,43 +42,43 @@
|
|||
"mitt": "^3.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.3",
|
||||
"pinia": "^2.1.4",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"url": "^0.11.0",
|
||||
"url": "^0.11.1",
|
||||
"vue": "3.3.4",
|
||||
"vue-i18n": "9.2.2",
|
||||
"vue-router": "^4.2.2",
|
||||
"vue-types": "^5.0.3",
|
||||
"vue-types": "^5.0.4",
|
||||
"web-storage-cache": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.6.5",
|
||||
"@commitlint/config-conventional": "^17.6.5",
|
||||
"@iconify/json": "^2.2.74",
|
||||
"@iconify/json": "^2.2.80",
|
||||
"@intlify/unplugin-vue-i18n": "^0.11.0",
|
||||
"@purge-icons/generated": "^0.9.0",
|
||||
"@types/intro.js": "^5.1.1",
|
||||
"@types/lodash-es": "^4.17.7",
|
||||
"@types/node": "^20.2.5",
|
||||
"@types/node": "^20.3.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.9",
|
||||
"@typescript-eslint/parser": "^5.59.9",
|
||||
"@unocss/transformer-variant-group": "^0.53.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.11",
|
||||
"@typescript-eslint/parser": "^5.59.11",
|
||||
"@unocss/transformer-variant-group": "^0.53.1",
|
||||
"@vitejs/plugin-legacy": "^4.0.4",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"@vue-macros/volar": "^0.10.2",
|
||||
"@vue-macros/volar": "^0.11.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"consola": "^3.1.0",
|
||||
"eslint": "^8.42.0",
|
||||
"eslint": "^8.43.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-define-config": "^1.20.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.14.1",
|
||||
"eslint-plugin-vue": "^9.15.0",
|
||||
"husky": "^8.0.3",
|
||||
"less": "^4.1.3",
|
||||
"lint-staged": "^13.2.2",
|
||||
|
|
@ -88,17 +88,17 @@
|
|||
"postcss-less": "^6.0.0",
|
||||
"prettier": "^2.8.8",
|
||||
"rimraf": "^5.0.1",
|
||||
"rollup": "^3.23.1",
|
||||
"stylelint": "^15.7.0",
|
||||
"rollup": "^3.25.1",
|
||||
"stylelint": "^15.8.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-prettier": "^9.0.5",
|
||||
"stylelint-config-recommended": "^12.0.0",
|
||||
"stylelint-config-standard": "^33.0.0",
|
||||
"stylelint-order": "^6.0.3",
|
||||
"terser": "^5.17.7",
|
||||
"terser": "^5.18.0",
|
||||
"typescript": "5.1.3",
|
||||
"unocss": "^0.53.0",
|
||||
"unplugin-vue-define-options": "^1.3.7",
|
||||
"unocss": "^0.53.1",
|
||||
"unplugin-vue-define-options": "^1.3.8",
|
||||
"vite": "4.3.9",
|
||||
"vite-plugin-ejs": "^1.6.4",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
"vite-plugin-purge-icons": "^0.9.2",
|
||||
"vite-plugin-style-import": "2.0.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^1.6.5"
|
||||
"vue-tsc": "^1.8.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14.18.0"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,5 @@
|
|||
<script lang="tsx">
|
||||
import {
|
||||
PropType,
|
||||
defineComponent,
|
||||
ref,
|
||||
computed,
|
||||
unref,
|
||||
watch,
|
||||
onMounted,
|
||||
defineAsyncComponent
|
||||
} from 'vue'
|
||||
import { PropType, defineComponent, ref, computed, unref, watch, onMounted } from 'vue'
|
||||
import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
|
||||
import { componentMap } from './helper/componentMap'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
|
@ -132,9 +123,9 @@ export default defineComponent({
|
|||
return unref(elFormRef) as ComponentRef<typeof ElForm>
|
||||
}
|
||||
|
||||
const getOptions = async (fn: Function) => {
|
||||
const getOptions = async (fn: Function, field: string) => {
|
||||
const options = await fn()
|
||||
console.log('=====：', options)
|
||||
console.log(field, options)
|
||||
}
|
||||
|
||||
expose({
|
||||
|
|
@ -195,12 +186,16 @@ export default defineComponent({
|
|||
|
||||
// 渲染formItem
|
||||
const renderFormItem = (item: FormSchema) => {
|
||||
// 如果有optionApi，优先使用optionApi
|
||||
if (item.optionApi) {
|
||||
// 内部自动调用接口，不影响其他渲染
|
||||
getOptions(item.optionApi, item.field)
|
||||
}
|
||||
const formItemSlots: Recordable = {
|
||||
default: () => {
|
||||
if (slots[item.field]) {
|
||||
return getSlot(slots, item.field, formModel.value)
|
||||
} else {
|
||||
console.log(item.field)
|
||||
const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
|
||||
|
||||
const { autoSetPlaceholder } = unref(getProps)
|
||||
|
|
@ -211,11 +206,6 @@ export default defineComponent({
|
|||
}
|
||||
// // 如果是select组件，并且没有自定义模板，自动渲染options
|
||||
if (item.component === ComponentNameEnum.SELECT) {
|
||||
// 如果有optionApi，优先使用optionApi
|
||||
if (item.optionApi) {
|
||||
// 内部自动调用接口，不影响其他渲染
|
||||
getOptions(item.optionApi)
|
||||
}
|
||||
slotsMap.default = !componentSlots.default
|
||||
? () => renderSelectOptions(item)
|
||||
: () => {
|
||||
|
|
@ -290,13 +280,6 @@ export default defineComponent({
|
|||
return (
|
||||
<ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
|
||||
{formItemSlots}
|
||||
{/* {{
|
||||
default: () => {
|
||||
console.log(item.field)
|
||||
|
||||
return '2222'
|
||||
}
|
||||
}} */}
|
||||
</ElFormItem>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ type CamelCaseComponentName = keyof typeof ComponentNameEnum extends infer K
|
|||
export type ComponentName = CamelCaseComponentName
|
||||
|
||||
export interface InputComponentProps {
|
||||
ref?: any
|
||||
maxlength?: number | string
|
||||
minlength?: number | string
|
||||
showWordLimit?: boolean
|
||||
|
|
@ -98,6 +99,7 @@ export interface InputComponentProps {
|
|||
}
|
||||
|
||||
export interface AutocompleteComponentProps {
|
||||
ref?: any
|
||||
placeholder?: string
|
||||
clearable?: boolean
|
||||
disabled?: boolean
|
||||
|
|
@ -130,6 +132,7 @@ export interface AutocompleteComponentProps {
|
|||
}
|
||||
|
||||
export interface InputNumberComponentProps {
|
||||
ref?: any
|
||||
min?: number
|
||||
max?: number
|
||||
step?: number
|
||||
|
|
@ -164,6 +167,7 @@ export interface SelectOption {
|
|||
}
|
||||
|
||||
export interface SelectComponentProps {
|
||||
ref?: any
|
||||
multiple?: boolean
|
||||
disabled?: boolean
|
||||
valueKey?: string
|
||||
|
|
@ -241,6 +245,7 @@ export interface SelectComponentProps {
|
|||
}
|
||||
|
||||
export interface SelectV2ComponentProps {
|
||||
ref?: any
|
||||
multiple?: boolean
|
||||
disabled?: boolean
|
||||
valueKey?: string
|
||||
|
|
@ -285,6 +290,7 @@ export interface SelectV2ComponentProps {
|
|||
}
|
||||
|
||||
export interface CascaderComponentProps {
|
||||
ref?: any
|
||||
options?: Record<string, unknown>[]
|
||||
props?: CascaderProps
|
||||
size?: ElementPlusSize
|
||||
|
|
@ -319,6 +325,7 @@ export interface CascaderComponentProps {
|
|||
}
|
||||
|
||||
export interface SwitchComponentProps {
|
||||
ref?: any
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
size?: ElementPlusSize
|
||||
|
|
@ -340,6 +347,7 @@ export interface SwitchComponentProps {
|
|||
}
|
||||
|
||||
export interface RateComponentProps {
|
||||
ref?: any
|
||||
max?: number
|
||||
size?: ElementPlusSize
|
||||
disabled?: boolean
|
||||
|
|
@ -367,6 +375,7 @@ export interface RateComponentProps {
|
|||
}
|
||||
|
||||
export interface ColorPickerComponentProps {
|
||||
ref?: any
|
||||
disabled?: boolean
|
||||
size?: ElementPlusSize
|
||||
showAlpha?: boolean
|
||||
|
|
@ -384,6 +393,7 @@ export interface ColorPickerComponentProps {
|
|||
}
|
||||
|
||||
export interface TransferComponentProps {
|
||||
ref?: any
|
||||
data?: any[]
|
||||
filterable?: boolean
|
||||
filterPlaceholder?: string
|
||||
|
|
@ -434,6 +444,7 @@ export interface RadioOption {
|
|||
[key: string]: any
|
||||
}
|
||||
export interface RadioGroupComponentProps {
|
||||
ref?: any
|
||||
size?: ElementPlusSize
|
||||
disabled?: boolean
|
||||
textColor?: string
|
||||
|
|
@ -461,6 +472,7 @@ export interface RadioGroupComponentProps {
|
|||
}
|
||||
|
||||
export interface RadioButtonComponentProps {
|
||||
ref?: any
|
||||
size?: ElementPlusSize
|
||||
disabled?: boolean
|
||||
textColor?: string
|
||||
|
|
@ -506,6 +518,7 @@ export interface CheckboxOption {
|
|||
}
|
||||
|
||||
export interface CheckboxGroupComponentProps {
|
||||
ref?: any
|
||||
size?: ElementPlusSize
|
||||
disabled?: boolean
|
||||
min?: number
|
||||
|
|
@ -534,6 +547,7 @@ export interface CheckboxGroupComponentProps {
|
|||
}
|
||||
|
||||
export interface DividerComponentProps {
|
||||
ref?: any
|
||||
min?: number
|
||||
max?: number
|
||||
disabled?: boolean
|
||||
|
|
@ -565,6 +579,7 @@ export interface DividerComponentProps {
|
|||
}
|
||||
|
||||
export interface DatePickerComponentProps {
|
||||
ref?: any
|
||||
readonly?: boolean
|
||||
disabled?: boolean
|
||||
size?: ElementPlusSize
|
||||
|
|
@ -616,6 +631,7 @@ export interface DatePickerComponentProps {
|
|||
}
|
||||
|
||||
export interface DateTimePickerComponentProps {
|
||||
ref?: any
|
||||
readonly?: boolean
|
||||
disabled?: boolean
|
||||
editable?: boolean
|
||||
|
|
@ -656,6 +672,7 @@ export interface DateTimePickerComponentProps {
|
|||
}
|
||||
|
||||
export interface TimePickerComponentProps {
|
||||
ref?: any
|
||||
readonly?: boolean
|
||||
disabled?: boolean
|
||||
editable?: boolean
|
||||
|
|
@ -692,6 +709,7 @@ export interface TimePickerComponentProps {
|
|||
}
|
||||
|
||||
export interface TimeSelectComponentProps {
|
||||
ref?: any
|
||||
disabled?: boolean
|
||||
editable?: boolean
|
||||
clearable?: boolean
|
||||
|
|
@ -716,6 +734,7 @@ export interface TimeSelectComponentProps {
|
|||
}
|
||||
|
||||
export interface EditorComponentProps {
|
||||
ref?: any
|
||||
editorConfig?: IEditorConfig
|
||||
style?: CSSProperties
|
||||
}
|
||||
|
|
@ -796,6 +815,7 @@ export interface FormSchema {
|
|||
| DateTimePickerComponentProps
|
||||
| TimePickerComponentProps
|
||||
| EditorComponentProps
|
||||
| any
|
||||
|
||||
/**
|
||||
* formItem组件属性，具体可以查看element-plus文档
|
||||
|
|
|
|||
|
|
@ -148,15 +148,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
|||
meta: {
|
||||
title: t('router.defaultForm')
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'use-form',
|
||||
component: () => import('@/views/Components/Form/UseFormDemo.vue'),
|
||||
name: 'UseForm',
|
||||
meta: {
|
||||
title: 'UseForm'
|
||||
}
|
||||
}
|
||||
// {
|
||||
// path: 'use-form',
|
||||
// component: () => import('@/views/Components/Form/UseFormDemo.vue'),
|
||||
// name: 'UseForm',
|
||||
// meta: {
|
||||
// title: 'UseForm'
|
||||
// }
|
||||
// }
|
||||
// {
|
||||
// path: 'ref-form',
|
||||
// component: () => import('@/views/Components/Form/RefForm.vue'),
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,270 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { Form, FormExpose } from '@/components/Form'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { reactive, unref, ref } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
import { getDictOneApi } from '@/api/common'
|
||||
import { FormSchema } from '@/types/form'
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const schema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'field1',
|
||||
label: t('formDemo.input'),
|
||||
component: 'Input',
|
||||
formItemProps: {
|
||||
rules: [required()]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field2',
|
||||
label: t('formDemo.select'),
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: 'option1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'option2',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field3',
|
||||
label: t('formDemo.radio'),
|
||||
component: 'Radio',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: 'option-1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'option-2',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field4',
|
||||
label: t('formDemo.checkbox'),
|
||||
component: 'Checkbox',
|
||||
value: [],
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: 'option-1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'option-2',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: 'option-3',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field5',
|
||||
component: 'DatePicker',
|
||||
label: t('formDemo.datePicker'),
|
||||
componentProps: {
|
||||
type: 'date'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field6',
|
||||
component: 'TimeSelect',
|
||||
label: t('formDemo.timeSelect')
|
||||
}
|
||||
])
|
||||
|
||||
const formRef = ref<FormExpose>()
|
||||
|
||||
const changeLabelWidth = (width: number | string) => {
|
||||
unref(formRef)?.setProps({
|
||||
labelWidth: width
|
||||
})
|
||||
}
|
||||
|
||||
const changeSize = (size: string) => {
|
||||
unref(formRef)?.setProps({
|
||||
size
|
||||
})
|
||||
}
|
||||
|
||||
const changeDisabled = (bool: boolean) => {
|
||||
unref(formRef)?.setProps({
|
||||
disabled: bool
|
||||
})
|
||||
}
|
||||
|
||||
const changeSchema = (del: boolean) => {
|
||||
if (del) {
|
||||
unref(formRef)?.delSchema('field2')
|
||||
} else if (!del && schema[1].field !== 'field2') {
|
||||
unref(formRef)?.addSchema(
|
||||
{
|
||||
field: 'field2',
|
||||
label: t('formDemo.select'),
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: 'option1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'option2',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
1
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const setValue = (reset: boolean) => {
|
||||
const elFormRef = unref(formRef)?.getElFormRef()
|
||||
if (reset) {
|
||||
elFormRef?.resetFields()
|
||||
} else {
|
||||
unref(formRef)?.setValues({
|
||||
field1: 'field1',
|
||||
field2: '2',
|
||||
field3: '2',
|
||||
field4: ['1', '3'],
|
||||
field5: '2022-01-27',
|
||||
field6: '17:00'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const index = ref(7)
|
||||
|
||||
const setLabel = () => {
|
||||
unref(formRef)?.setSchema([
|
||||
{
|
||||
field: 'field2',
|
||||
path: 'label',
|
||||
value: `${t('formDemo.select')} ${index.value}`
|
||||
},
|
||||
{
|
||||
field: 'field2',
|
||||
path: 'componentProps.options',
|
||||
value: [
|
||||
{
|
||||
label: 'option-1',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: 'option-2',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: 'option-3',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
index.value++
|
||||
}
|
||||
|
||||
const addItem = () => {
|
||||
if (unref(index) % 2 === 0) {
|
||||
unref(formRef)?.addSchema({
|
||||
field: `field${unref(index)}`,
|
||||
label: `${t('formDemo.input')}${unref(index)}`,
|
||||
component: 'Input'
|
||||
})
|
||||
} else {
|
||||
unref(formRef)?.addSchema(
|
||||
{
|
||||
field: `field${unref(index)}`,
|
||||
label: `${t('formDemo.input')}${unref(index)}`,
|
||||
component: 'Input'
|
||||
},
|
||||
unref(index)
|
||||
)
|
||||
}
|
||||
index.value++
|
||||
}
|
||||
|
||||
const formValidation = () => {
|
||||
const elFormRef = unref(formRef)?.getElFormRef()
|
||||
elFormRef?.validate()?.catch(() => {})
|
||||
}
|
||||
|
||||
const verifyReset = () => {
|
||||
const elFormRef = unref(formRef)?.getElFormRef()
|
||||
elFormRef?.resetFields()
|
||||
}
|
||||
|
||||
const getDictOne = async () => {
|
||||
const res = await getDictOneApi()
|
||||
if (res) {
|
||||
unref(formRef)?.setSchema([
|
||||
{
|
||||
field: 'field2',
|
||||
path: 'componentProps.options',
|
||||
value: res.data
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="`RefForm ${t('formDemo.operate')}`">
|
||||
<ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
|
||||
<ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
|
||||
|
||||
<ElButton @click="changeSize('large')">{{ t('formDemo.change') }} size</ElButton>
|
||||
<ElButton @click="changeSize('default')">{{ t('formDemo.restore') }} size</ElButton>
|
||||
|
||||
<ElButton @click="changeDisabled(true)">{{ t('formDemo.disabled') }}</ElButton>
|
||||
<ElButton @click="changeDisabled(false)">{{ t('formDemo.disablement') }}</ElButton>
|
||||
|
||||
<ElButton @click="changeSchema(true)">
|
||||
{{ t('formDemo.delete') }} {{ t('formDemo.select') }}
|
||||
</ElButton>
|
||||
<ElButton @click="changeSchema(false)">
|
||||
{{ t('formDemo.add') }} {{ t('formDemo.select') }}
|
||||
</ElButton>
|
||||
|
||||
<ElButton @click="setValue(false)">{{ t('formDemo.setValue') }}</ElButton>
|
||||
<ElButton @click="setValue(true)">{{ t('formDemo.resetValue') }}</ElButton>
|
||||
|
||||
<ElButton @click="setLabel">
|
||||
{{ t('formDemo.set') }} {{ t('formDemo.select') }} label
|
||||
</ElButton>
|
||||
|
||||
<ElButton @click="addItem"> {{ t('formDemo.add') }} {{ t('formDemo.subitem') }} </ElButton>
|
||||
|
||||
<ElButton @click="formValidation"> {{ t('formDemo.formValidation') }} </ElButton>
|
||||
<ElButton @click="verifyReset"> {{ t('formDemo.verifyReset') }} </ElButton>
|
||||
|
||||
<ElButton @click="getDictOne">
|
||||
{{ t('searchDemo.dynamicOptions') }}
|
||||
</ElButton>
|
||||
</ContentWrap>
|
||||
<ContentWrap :title="`RefForm ${t('formDemo.example')}`">
|
||||
<Form :schema="schema" ref="formRef" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { Form } from '@/components/Form'
|
||||
import { Form, FormSchema } from '@/components/Form'
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
|
|
@ -7,7 +7,6 @@ import { reactive, unref, ref } from 'vue'
|
|||
import { ElButton } from 'element-plus'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
import { getDictOneApi } from '@/api/common'
|
||||
import { FormSchema } from '@/types/form'
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
|
|
@ -42,7 +41,7 @@ const schema = reactive<FormSchema[]>([
|
|||
{
|
||||
field: 'field3',
|
||||
label: t('formDemo.radio'),
|
||||
component: 'Radio',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
|
|
@ -59,7 +58,7 @@ const schema = reactive<FormSchema[]>([
|
|||
{
|
||||
field: 'field4',
|
||||
label: t('formDemo.checkbox'),
|
||||
component: 'Checkbox',
|
||||
component: 'CheckboxGroup',
|
||||
value: [],
|
||||
componentProps: {
|
||||
options: [
|
||||
|
|
@ -93,9 +92,7 @@ const schema = reactive<FormSchema[]>([
|
|||
}
|
||||
])
|
||||
|
||||
const { register, methods, elFormRef } = useForm({
|
||||
schema
|
||||
})
|
||||
const { register, methods, elFormRef } = useForm()
|
||||
|
||||
const changeLabelWidth = (width: number | string) => {
|
||||
const { setProps } = methods
|
||||
|
|
@ -241,7 +238,7 @@ const getDictOne = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="`UseForm ${t('formDemo.operate')}`">
|
||||
<ContentWrap :title="`UseForm ${t('formDemo.operate')}`" style="margin-bottom: 20px">
|
||||
<ElButton @click="changeLabelWidth(150)">{{ t('formDemo.change') }} labelWidth</ElButton>
|
||||
<ElButton @click="changeLabelWidth('auto')">{{ t('formDemo.restore') }} labelWidth</ElButton>
|
||||
|
||||
|
|
@ -275,6 +272,12 @@ const getDictOne = async () => {
|
|||
</ElButton>
|
||||
</ContentWrap>
|
||||
<ContentWrap :title="`UseForm ${t('formDemo.example')}`">
|
||||
<Form @register="register" />
|
||||
<Form :schema="schema" @register="register" />
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.el-button + .el-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue