feat: 重构Dialog组件示例
This commit is contained in:
parent
e451bfcde6
commit
9a78ac977e
|
@ -118,7 +118,7 @@ const dialogStyle = computed(() => {
|
||||||
height: 54px;
|
height: 54px;
|
||||||
}
|
}
|
||||||
&__body {
|
&__body {
|
||||||
padding: 0 !important;
|
padding: 15px !important;
|
||||||
}
|
}
|
||||||
&__footer {
|
&__footer {
|
||||||
border-top: 1px solid var(--el-border-color);
|
border-top: 1px solid var(--el-border-color);
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { defineComponent } from 'vue'
|
||||||
export const useRenderCheckbox = () => {
|
export const useRenderCheckbox = () => {
|
||||||
const renderCheckboxOptions = (item: FormSchema) => {
|
const renderCheckboxOptions = (item: FormSchema) => {
|
||||||
// 如果有别名,就取别名
|
// 如果有别名,就取别名
|
||||||
const componentProps = item.componentProps as CheckboxGroupComponentProps
|
const componentProps = item?.componentProps as CheckboxGroupComponentProps
|
||||||
const valueAlias = componentProps?.props?.value || 'value'
|
const valueAlias = componentProps?.props?.value || 'value'
|
||||||
const labelAlias = componentProps?.props?.label || 'label'
|
const labelAlias = componentProps?.props?.label || 'label'
|
||||||
const disabledAlias = componentProps?.props?.disabled || 'disabled'
|
const disabledAlias = componentProps?.props?.disabled || 'disabled'
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { defineComponent } from 'vue'
|
||||||
export const useRenderRadio = () => {
|
export const useRenderRadio = () => {
|
||||||
const renderRadioOptions = (item: FormSchema) => {
|
const renderRadioOptions = (item: FormSchema) => {
|
||||||
// 如果有别名,就取别名
|
// 如果有别名,就取别名
|
||||||
const componentProps = item.componentProps as RadioGroupComponentProps
|
const componentProps = item?.componentProps as RadioGroupComponentProps
|
||||||
const valueAlias = componentProps?.props?.value || 'value'
|
const valueAlias = componentProps?.props?.value || 'value'
|
||||||
const labelAlias = componentProps?.props?.label || 'label'
|
const labelAlias = componentProps?.props?.label || 'label'
|
||||||
const disabledAlias = componentProps?.props?.disabled || 'disabled'
|
const disabledAlias = componentProps?.props?.disabled || 'disabled'
|
||||||
|
|
|
@ -4,8 +4,8 @@ import { FormSchema, SelectComponentProps, SelectOption } from '../types'
|
||||||
export const useRenderSelect = () => {
|
export const useRenderSelect = () => {
|
||||||
// 渲染 select options
|
// 渲染 select options
|
||||||
const renderSelectOptions = (item: FormSchema) => {
|
const renderSelectOptions = (item: FormSchema) => {
|
||||||
const componentsProps = item.componentProps as SelectComponentProps
|
const componentsProps = item?.componentProps as SelectComponentProps
|
||||||
const optionGroupDefaultSlot = componentsProps.slots?.optionGroupDefault
|
const optionGroupDefaultSlot = componentsProps?.slots?.optionGroupDefault
|
||||||
// 如果有别名,就取别名
|
// 如果有别名,就取别名
|
||||||
const labelAlias = componentsProps?.props?.label
|
const labelAlias = componentsProps?.props?.label
|
||||||
const keyAlias = componentsProps?.props?.key
|
const keyAlias = componentsProps?.props?.key
|
||||||
|
|
|
@ -3,11 +3,11 @@ import { ContentWrap } from '@/components/ContentWrap'
|
||||||
import { Dialog } from '@/components/Dialog'
|
import { Dialog } from '@/components/Dialog'
|
||||||
import { ElButton } from 'element-plus'
|
import { ElButton } from 'element-plus'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { ref, reactive, unref } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { Form, FormExpose } from '@/components/Form'
|
import { Form, FormSchema } from '@/components/Form'
|
||||||
import { useValidator } from '@/hooks/web/useValidator'
|
import { useValidator } from '@/hooks/web/useValidator'
|
||||||
import { getDictOneApi } from '@/api/common'
|
import { getDictOneApi } from '@/api/common'
|
||||||
import { FormSchema } from '@/types/form'
|
import { useForm } from '@/hooks/web/useForm'
|
||||||
|
|
||||||
const { required } = useValidator()
|
const { required } = useValidator()
|
||||||
|
|
||||||
|
@ -17,6 +17,9 @@ const dialogVisible = ref(false)
|
||||||
|
|
||||||
const dialogVisible2 = ref(false)
|
const dialogVisible2 = ref(false)
|
||||||
|
|
||||||
|
const { formRegister, formMethods } = useForm()
|
||||||
|
const { getElFormExpose } = formMethods
|
||||||
|
|
||||||
const schema = reactive<FormSchema[]>([
|
const schema = reactive<FormSchema[]>([
|
||||||
{
|
{
|
||||||
field: 'field1',
|
field: 'field1',
|
||||||
|
@ -30,23 +33,18 @@ const schema = reactive<FormSchema[]>([
|
||||||
field: 'field2',
|
field: 'field2',
|
||||||
label: t('formDemo.select'),
|
label: t('formDemo.select'),
|
||||||
component: 'Select',
|
component: 'Select',
|
||||||
componentProps: {
|
// componentProps: {
|
||||||
options: [
|
// options: []
|
||||||
{
|
// },
|
||||||
label: 'option1',
|
optionApi: async () => {
|
||||||
value: '1'
|
const res = await getDictOneApi()
|
||||||
},
|
return res.data
|
||||||
{
|
|
||||||
label: 'option2',
|
|
||||||
value: '2'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'field3',
|
field: 'field3',
|
||||||
label: t('formDemo.radio'),
|
label: t('formDemo.radio'),
|
||||||
component: 'Radio',
|
component: 'RadioGroup',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
|
@ -63,7 +61,7 @@ const schema = reactive<FormSchema[]>([
|
||||||
{
|
{
|
||||||
field: 'field4',
|
field: 'field4',
|
||||||
label: t('formDemo.checkbox'),
|
label: t('formDemo.checkbox'),
|
||||||
component: 'Checkbox',
|
component: 'CheckboxGroup',
|
||||||
value: [],
|
value: [],
|
||||||
componentProps: {
|
componentProps: {
|
||||||
options: [
|
options: [
|
||||||
|
@ -74,10 +72,6 @@ const schema = reactive<FormSchema[]>([
|
||||||
{
|
{
|
||||||
label: 'option-2',
|
label: 'option-2',
|
||||||
value: '2'
|
value: '2'
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'option-3',
|
|
||||||
value: '3'
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -97,26 +91,15 @@ const schema = reactive<FormSchema[]>([
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
const getDictOne = async () => {
|
const formSubmit = async () => {
|
||||||
const res = await getDictOneApi()
|
const elFormExpose = await getElFormExpose()
|
||||||
if (res) {
|
elFormExpose?.validate((valid) => {
|
||||||
schema[1].componentProps!.options = res.data
|
if (valid) {
|
||||||
}
|
console.log('submit success')
|
||||||
}
|
} else {
|
||||||
getDictOne()
|
console.log('submit fail')
|
||||||
|
}
|
||||||
const formRef = ref<FormExpose>()
|
})
|
||||||
|
|
||||||
const formSubmit = () => {
|
|
||||||
unref(formRef)
|
|
||||||
?.getElFormRef()
|
|
||||||
?.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
console.log('submit success')
|
|
||||||
} else {
|
|
||||||
console.log('submit fail')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -138,7 +121,7 @@ const formSubmit = () => {
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
<Dialog v-model="dialogVisible2" :title="t('dialogDemo.dialog')">
|
<Dialog v-model="dialogVisible2" :title="t('dialogDemo.dialog')">
|
||||||
<Form ref="formRef" :schema="schema" />
|
<Form :schema="schema" @register="formRegister" />
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<ElButton type="primary" @click="formSubmit">{{ t('dialogDemo.submit') }}</ElButton>
|
<ElButton type="primary" @click="formSubmit">{{ t('dialogDemo.submit') }}</ElButton>
|
||||||
<ElButton @click="dialogVisible2 = false">{{ t('dialogDemo.close') }}</ElButton>
|
<ElButton @click="dialogVisible2 = false">{{ t('dialogDemo.close') }}</ElButton>
|
||||||
|
|
Loading…
Reference in New Issue