wip(VForm): VForm component development
This commit is contained in:
kailong321200875
parent
d9d64f3931
commit
28be932fd2
|
|
@ -39,6 +39,7 @@
|
|||
"@commitlint/config-conventional": "^15.0.0",
|
||||
"@iconify/json": "^1.1.441",
|
||||
"@intlify/vite-plugin-vue-i18n": "^3.2.1",
|
||||
"@types/lodash-es": "^4.17.5",
|
||||
"@types/node": "^16.11.12",
|
||||
"@typescript-eslint/eslint-plugin": "^5.6.0",
|
||||
"@typescript-eslint/parser": "^5.6.0",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ specifiers:
|
|||
'@commitlint/config-conventional': ^15.0.0
|
||||
'@iconify/json': ^1.1.441
|
||||
'@intlify/vite-plugin-vue-i18n': ^3.2.1
|
||||
'@types/lodash-es': ^4.17.5
|
||||
'@types/node': ^16.11.12
|
||||
'@typescript-eslint/eslint-plugin': ^5.6.0
|
||||
'@typescript-eslint/parser': ^5.6.0
|
||||
|
|
@ -24,7 +25,6 @@ specifiers:
|
|||
less: ^4.1.2
|
||||
lint-staged: ^12.1.2
|
||||
lodash-es: ^4.17.21
|
||||
normalize.css: ^8.0.1
|
||||
pinia: ^2.0.6
|
||||
postcss: ^8.4.4
|
||||
postcss-html: ^1.3.0
|
||||
|
|
@ -55,7 +55,6 @@ dependencies:
|
|||
'@vueuse/core': registry.npmmirror.com/@vueuse/core/7.1.2_vue@3.2.24
|
||||
element-plus: registry.npmmirror.com/element-plus/1.2.0-beta.6_vue@3.2.24
|
||||
lodash-es: registry.nlark.com/lodash-es/4.17.21
|
||||
normalize.css: registry.nlark.com/normalize.css/8.0.1
|
||||
pinia: registry.npmmirror.com/pinia/2.0.6_typescript@4.5.2+vue@3.2.24
|
||||
vue: registry.npmmirror.com/vue/3.2.24
|
||||
vue-i18n: registry.npmmirror.com/vue-i18n/9.1.9_vue@3.2.24
|
||||
|
|
@ -67,6 +66,7 @@ devDependencies:
|
|||
'@commitlint/config-conventional': registry.npmmirror.com/@commitlint/config-conventional/15.0.0
|
||||
'@iconify/json': registry.npmmirror.com/@iconify/json/1.1.441
|
||||
'@intlify/vite-plugin-vue-i18n': registry.npmmirror.com/@intlify/vite-plugin-vue-i18n/3.2.1_vite@2.6.14+vue-i18n@9.1.9
|
||||
'@types/lodash-es': registry.npmmirror.com/@types/lodash-es/4.17.5
|
||||
'@types/node': registry.npmmirror.com/@types/node/16.11.12
|
||||
'@typescript-eslint/eslint-plugin': registry.npmmirror.com/@typescript-eslint/eslint-plugin/5.6.0_16d83f5c41c3abb1061a82b07c18e4f3
|
||||
'@typescript-eslint/parser': registry.npmmirror.com/@typescript-eslint/parser/5.6.0_eslint@8.4.1+typescript@4.5.2
|
||||
|
|
@ -3349,17 +3349,6 @@ packages:
|
|||
version: 0.2.0
|
||||
dev: true
|
||||
|
||||
registry.nlark.com/normalize.css/8.0.1:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha1-m5iiCHOLnMJjTKrLxC0THJdIe/M=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.nlark.com/normalize.css/download/normalize.css-8.0.1.tgz
|
||||
}
|
||||
name: normalize.css
|
||||
version: 8.0.1
|
||||
dev: false
|
||||
|
||||
registry.nlark.com/nth-check/2.0.1:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -4335,7 +4324,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-qVT5Ma66UI0we78Gnv8MAclhFvc=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz
|
||||
tarball: https://registry.nlark.com/semver/download/semver-5.7.1.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-5.7.1.tgz
|
||||
}
|
||||
name: semver
|
||||
version: 5.7.1
|
||||
|
|
@ -4347,7 +4336,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz
|
||||
tarball: https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1631500167672&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz
|
||||
}
|
||||
name: semver
|
||||
version: 6.3.0
|
||||
|
|
@ -6119,16 +6108,16 @@ packages:
|
|||
'@iconify/types': registry.npmmirror.com/@iconify/types/1.0.12
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@intlify/bundle-utils/2.1.0_vue-i18n@9.1.9:
|
||||
registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-ogvmAjbSq0su4ijQbwqRfb0yimizZSK+HHV0SF3XCHSCtL+PDdRIDkkeNpNdPxNmdahORHXknC06Umehz4nTnQ==,
|
||||
integrity: sha512-qVuN7+c84UB6rlLHSued2J9R86LG1rHg6ZibCghGMyPXnW0nOuIfkUFf1F7tXIqfMXjIPeJzlbpmzjWTI2z9Kw==,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/@intlify/bundle-utils/download/@intlify/bundle-utils-2.1.0.tgz
|
||||
tarball: https://registry.npmmirror.com/@intlify/bundle-utils/download/@intlify/bundle-utils-2.2.0.tgz
|
||||
}
|
||||
id: registry.npmmirror.com/@intlify/bundle-utils/2.1.0
|
||||
id: registry.npmmirror.com/@intlify/bundle-utils/2.2.0
|
||||
name: '@intlify/bundle-utils'
|
||||
version: 2.1.0
|
||||
version: 2.2.0
|
||||
engines: { node: '>= 12' }
|
||||
peerDependencies:
|
||||
petite-vue-i18n: '*'
|
||||
|
|
@ -6284,7 +6273,7 @@ packages:
|
|||
vue-i18n:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.1.0_vue-i18n@9.1.9
|
||||
'@intlify/bundle-utils': registry.npmmirror.com/@intlify/bundle-utils/2.2.0_vue-i18n@9.1.9
|
||||
'@intlify/shared': registry.npmmirror.com/@intlify/shared/9.2.0-beta.23
|
||||
'@rollup/pluginutils': registry.nlark.com/@rollup/pluginutils/4.1.1
|
||||
debug: registry.npmmirror.com/debug/4.3.3
|
||||
|
|
@ -6345,6 +6334,30 @@ packages:
|
|||
version: 7.0.9
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@types/lodash-es/4.17.5:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha1-HD/dFoSdhK6kOJCxxg2jeftQE1M=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/@types/lodash-es/download/@types/lodash-es-4.17.5.tgz
|
||||
}
|
||||
name: '@types/lodash-es'
|
||||
version: 4.17.5
|
||||
dependencies:
|
||||
'@types/lodash': registry.npmmirror.com/@types/lodash/4.14.178
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@types/lodash/4.14.178:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz
|
||||
}
|
||||
name: '@types/lodash'
|
||||
version: 4.14.178
|
||||
dev: true
|
||||
|
||||
registry.npmmirror.com/@types/minimatch/3.0.5:
|
||||
resolution:
|
||||
{
|
||||
|
|
@ -6974,7 +6987,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz?cache=0&sync_timestamp=1637225943828&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-7.4.1.tgz
|
||||
tarball: https://registry.npmmirror.com/acorn/download/acorn-7.4.1.tgz
|
||||
}
|
||||
name: acorn
|
||||
version: 7.4.1
|
||||
|
|
@ -6987,7 +7000,7 @@ packages:
|
|||
{
|
||||
integrity: sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz?cache=0&sync_timestamp=1637225943828&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Facorn%2Fdownload%2Facorn-8.6.0.tgz
|
||||
tarball: https://registry.npmmirror.com/acorn/download/acorn-8.6.0.tgz
|
||||
}
|
||||
name: acorn
|
||||
version: 8.6.0
|
||||
|
|
@ -7925,7 +7938,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-MOvR73wv3/AcOk8VEESvJfqwUj4=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz?cache=0&sync_timestamp=1636378941796&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-1.3.0.tgz
|
||||
tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-1.3.0.tgz
|
||||
}
|
||||
name: eslint-visitor-keys
|
||||
version: 1.3.0
|
||||
|
|
@ -7937,7 +7950,7 @@ packages:
|
|||
{
|
||||
integrity: sha1-9lMoJZMFknOSyTjtROsKXJsr0wM=,
|
||||
registry: https://registry.npm.taobao.org/,
|
||||
tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz?cache=0&sync_timestamp=1636378941796&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Feslint-visitor-keys%2Fdownload%2Feslint-visitor-keys-2.1.0.tgz
|
||||
tarball: https://registry.npmmirror.com/eslint-visitor-keys/download/eslint-visitor-keys-2.1.0.tgz
|
||||
}
|
||||
name: eslint-visitor-keys
|
||||
version: 2.1.0
|
||||
|
|
|
|||
375
src/App.vue
375
src/App.vue
|
|
@ -5,6 +5,11 @@ import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
|||
// import en from 'element-plus/lib/locale/lang/en'
|
||||
import { VFrom } from '@/components/Form'
|
||||
import Calendar from '~icons/ep/calendar'
|
||||
import Check from '~icons/ep/check'
|
||||
import Close from '~icons/ep/close'
|
||||
import ChatRound from '~icons/ep/chatRound'
|
||||
import ChatLineRound from '~icons/ep/chatLineRound'
|
||||
import ChatDotRound from '~icons/ep/chatDotRound'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
|
||||
|
|
@ -60,6 +65,257 @@ const options2 = ref<FormOptions[]>(
|
|||
})
|
||||
)
|
||||
|
||||
const options3: FormOptions[] = [
|
||||
{
|
||||
value: 'guide',
|
||||
label: 'Guide',
|
||||
children: [
|
||||
{
|
||||
value: 'disciplines',
|
||||
label: 'Disciplines',
|
||||
children: [
|
||||
{
|
||||
value: 'consistency',
|
||||
label: 'Consistency'
|
||||
},
|
||||
{
|
||||
value: 'feedback',
|
||||
label: 'Feedback'
|
||||
},
|
||||
{
|
||||
value: 'efficiency',
|
||||
label: 'Efficiency'
|
||||
},
|
||||
{
|
||||
value: 'controllability',
|
||||
label: 'Controllability'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [
|
||||
{
|
||||
value: 'side nav',
|
||||
label: 'Side Navigation'
|
||||
},
|
||||
{
|
||||
value: 'top nav',
|
||||
label: 'Top Navigation'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'component',
|
||||
label: 'Component',
|
||||
children: [
|
||||
{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [
|
||||
{
|
||||
value: 'layout',
|
||||
label: 'Layout'
|
||||
},
|
||||
{
|
||||
value: 'color',
|
||||
label: 'Color'
|
||||
},
|
||||
{
|
||||
value: 'typography',
|
||||
label: 'Typography'
|
||||
},
|
||||
{
|
||||
value: 'icon',
|
||||
label: 'Icon'
|
||||
},
|
||||
{
|
||||
value: 'button',
|
||||
label: 'Button'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [
|
||||
{
|
||||
value: 'radio',
|
||||
label: 'Radio'
|
||||
},
|
||||
{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox'
|
||||
},
|
||||
{
|
||||
value: 'input',
|
||||
label: 'Input'
|
||||
},
|
||||
{
|
||||
value: 'input-number',
|
||||
label: 'InputNumber'
|
||||
},
|
||||
{
|
||||
value: 'select',
|
||||
label: 'Select'
|
||||
},
|
||||
{
|
||||
value: 'cascader',
|
||||
label: 'Cascader'
|
||||
},
|
||||
{
|
||||
value: 'switch',
|
||||
label: 'Switch'
|
||||
},
|
||||
{
|
||||
value: 'slider',
|
||||
label: 'Slider'
|
||||
},
|
||||
{
|
||||
value: 'time-picker',
|
||||
label: 'TimePicker'
|
||||
},
|
||||
{
|
||||
value: 'date-picker',
|
||||
label: 'DatePicker'
|
||||
},
|
||||
{
|
||||
value: 'datetime-picker',
|
||||
label: 'DateTimePicker'
|
||||
},
|
||||
{
|
||||
value: 'upload',
|
||||
label: 'Upload'
|
||||
},
|
||||
{
|
||||
value: 'rate',
|
||||
label: 'Rate'
|
||||
},
|
||||
{
|
||||
value: 'form',
|
||||
label: 'Form'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'data',
|
||||
label: 'Data',
|
||||
children: [
|
||||
{
|
||||
value: 'table',
|
||||
label: 'Table'
|
||||
},
|
||||
{
|
||||
value: 'tag',
|
||||
label: 'Tag'
|
||||
},
|
||||
{
|
||||
value: 'progress',
|
||||
label: 'Progress'
|
||||
},
|
||||
{
|
||||
value: 'tree',
|
||||
label: 'Tree'
|
||||
},
|
||||
{
|
||||
value: 'pagination',
|
||||
label: 'Pagination'
|
||||
},
|
||||
{
|
||||
value: 'badge',
|
||||
label: 'Badge'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'notice',
|
||||
label: 'Notice',
|
||||
children: [
|
||||
{
|
||||
value: 'alert',
|
||||
label: 'Alert'
|
||||
},
|
||||
{
|
||||
value: 'loading',
|
||||
label: 'Loading'
|
||||
},
|
||||
{
|
||||
value: 'message',
|
||||
label: 'Message'
|
||||
},
|
||||
{
|
||||
value: 'message-box',
|
||||
label: 'MessageBox'
|
||||
},
|
||||
{
|
||||
value: 'notification',
|
||||
label: 'Notification'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'navigation',
|
||||
label: 'Navigation',
|
||||
children: [
|
||||
{
|
||||
value: 'menu',
|
||||
label: 'Menu'
|
||||
},
|
||||
{
|
||||
value: 'tabs',
|
||||
label: 'Tabs'
|
||||
},
|
||||
{
|
||||
value: 'breadcrumb',
|
||||
label: 'Breadcrumb'
|
||||
},
|
||||
{
|
||||
value: 'dropdown',
|
||||
label: 'Dropdown'
|
||||
},
|
||||
{
|
||||
value: 'steps',
|
||||
label: 'Steps'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'others',
|
||||
label: 'Others',
|
||||
children: [
|
||||
{
|
||||
value: 'dialog',
|
||||
label: 'Dialog'
|
||||
},
|
||||
{
|
||||
value: 'tooltip',
|
||||
label: 'Tooltip'
|
||||
},
|
||||
{
|
||||
value: 'popover',
|
||||
label: 'Popover'
|
||||
},
|
||||
{
|
||||
value: 'card',
|
||||
label: 'Card'
|
||||
},
|
||||
{
|
||||
value: 'carousel',
|
||||
label: 'Carousel'
|
||||
},
|
||||
{
|
||||
value: 'collapse',
|
||||
label: 'Collapse'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const schema = reactive<VFormSchema[]>([
|
||||
{
|
||||
field: 'field1',
|
||||
|
|
@ -140,30 +396,30 @@ const schema = reactive<VFormSchema[]>([
|
|||
{
|
||||
field: 'field10',
|
||||
component: 'Divider',
|
||||
componentProps: {
|
||||
text: t('formDemo.inputNumber')
|
||||
}
|
||||
label: t('formDemo.inputNumber')
|
||||
},
|
||||
{
|
||||
field: 'field11',
|
||||
label: t('formDemo.default'),
|
||||
component: 'InputNumber'
|
||||
component: 'InputNumber',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
field: 'field11',
|
||||
field: 'field12',
|
||||
label: t('formDemo.position'),
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
controlsPosition: 'right'
|
||||
}
|
||||
},
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
field: 'field12',
|
||||
field: 'field13',
|
||||
label: t('formDemo.select'),
|
||||
component: 'Divider'
|
||||
},
|
||||
{
|
||||
field: 'field13',
|
||||
field: 'field14',
|
||||
label: t('formDemo.default'),
|
||||
component: 'Select',
|
||||
options: [
|
||||
|
|
@ -178,7 +434,7 @@ const schema = reactive<VFormSchema[]>([
|
|||
]
|
||||
},
|
||||
{
|
||||
field: 'field14',
|
||||
field: 'field15',
|
||||
label: t('formDemo.slot'),
|
||||
component: 'Select',
|
||||
options: [
|
||||
|
|
@ -194,7 +450,7 @@ const schema = reactive<VFormSchema[]>([
|
|||
optionsSlot: true
|
||||
},
|
||||
{
|
||||
field: 'field15',
|
||||
field: 'field16',
|
||||
label: t('formDemo.group'),
|
||||
component: 'Select',
|
||||
options: [
|
||||
|
|
@ -227,7 +483,7 @@ const schema = reactive<VFormSchema[]>([
|
|||
]
|
||||
},
|
||||
{
|
||||
field: 'field16',
|
||||
field: 'field17',
|
||||
label: `${t('formDemo.group')}${t('formDemo.slot')}`,
|
||||
component: 'Select',
|
||||
options: [
|
||||
|
|
@ -261,18 +517,18 @@ const schema = reactive<VFormSchema[]>([
|
|||
optionsSlot: true
|
||||
},
|
||||
{
|
||||
field: 'field17',
|
||||
field: 'field18',
|
||||
label: `${t('formDemo.selectV2')}`,
|
||||
component: 'Divider'
|
||||
},
|
||||
{
|
||||
field: 'field18',
|
||||
field: 'field19',
|
||||
label: t('formDemo.default'),
|
||||
component: 'SelectV2',
|
||||
options: options.value
|
||||
},
|
||||
{
|
||||
field: 'field18',
|
||||
field: 'field20',
|
||||
label: t('formDemo.slot'),
|
||||
component: 'SelectV2',
|
||||
options: options.value,
|
||||
|
|
@ -283,13 +539,13 @@ const schema = reactive<VFormSchema[]>([
|
|||
}
|
||||
},
|
||||
{
|
||||
field: 'field19',
|
||||
field: 'field21',
|
||||
label: t('formDemo.group'),
|
||||
component: 'SelectV2',
|
||||
options: options2.value
|
||||
},
|
||||
{
|
||||
field: 'field20',
|
||||
field: 'field22',
|
||||
label: `${t('formDemo.group')}${t('formDemo.slot')}`,
|
||||
component: 'SelectV2',
|
||||
options: options2.value,
|
||||
|
|
@ -298,6 +554,70 @@ const schema = reactive<VFormSchema[]>([
|
|||
default: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field23',
|
||||
label: t('formDemo.cascader'),
|
||||
component: 'Divider'
|
||||
},
|
||||
{
|
||||
field: 'field24',
|
||||
label: t('formDemo.default'),
|
||||
component: 'Cascader',
|
||||
options: options3
|
||||
},
|
||||
{
|
||||
field: 'field25',
|
||||
label: t('formDemo.slot'),
|
||||
component: 'Cascader',
|
||||
options: options3,
|
||||
componentProps: {
|
||||
slots: {
|
||||
default: true
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field26',
|
||||
label: t('formDemo.switch'),
|
||||
component: 'Divider'
|
||||
},
|
||||
{
|
||||
field: 'field27',
|
||||
label: t('formDemo.default'),
|
||||
component: 'Switch',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
field: 'field28',
|
||||
label: t('formDemo.icon'),
|
||||
component: 'Switch',
|
||||
value: false,
|
||||
componentProps: {
|
||||
activeIcon: Check,
|
||||
inactiveIcon: Close
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'field29',
|
||||
label: t('formDemo.rate'),
|
||||
component: 'Divider'
|
||||
},
|
||||
{
|
||||
field: 'field30',
|
||||
label: t('formDemo.default'),
|
||||
component: 'Rate',
|
||||
value: null
|
||||
},
|
||||
{
|
||||
field: 'field31',
|
||||
label: t('formDemo.icon'),
|
||||
component: 'Rate',
|
||||
value: null,
|
||||
componentProps: {
|
||||
voidIcon: ChatRound,
|
||||
icons: [ChatRound, ChatLineRound, ChatDotRound]
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
@ -320,21 +640,14 @@ const schema = reactive<VFormSchema[]>([
|
|||
<span class="link">{{ item.link }}</span>
|
||||
</template>
|
||||
|
||||
<template #field14-option="{ item }">
|
||||
<template #field15-option="{ item }">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #field16-option="{ item }">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #field18-default="{ item }">
|
||||
<template #field17-option="{ item }">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||
{{ item.value }}
|
||||
|
|
@ -347,6 +660,18 @@ const schema = reactive<VFormSchema[]>([
|
|||
{{ item.value }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #field22-default="{ item }">
|
||||
<span style="float: left">{{ item.label }}</span>
|
||||
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #field25-default="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||
</template>
|
||||
</VFrom>
|
||||
</ElConfigProvider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
<script lang="tsx">
|
||||
import { PropType, defineComponent, ref, computed, unref } from 'vue'
|
||||
import { PropType, defineComponent, ref, computed, unref, reactive, watch } from 'vue'
|
||||
import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
|
||||
import { componentMap } from './componentMap'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { getSlot } from '@/utils/tsxHelper'
|
||||
import { setTextPlaceholder, setGridProp, setComponentProps, setItemComponentSlots } from './helper'
|
||||
import {
|
||||
setTextPlaceholder,
|
||||
setGridProp,
|
||||
setComponentProps,
|
||||
setItemComponentSlots,
|
||||
setModel
|
||||
} from './helper'
|
||||
import { useRenderSelect } from './components/useRenderSelect'
|
||||
import { useRenderCascader } from './components/useRenderCascader'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VForm',
|
||||
|
|
@ -31,9 +38,24 @@ export default defineComponent({
|
|||
labelWidth: propTypes.oneOfType([String, Number]).def(130)
|
||||
},
|
||||
setup(props, { slots }) {
|
||||
// element form 实例
|
||||
const formRef = ref<ComponentRef<typeof ElForm>>()
|
||||
const getProps = computed(() => props)
|
||||
const { schema, isCol, isCustom, autoSetPlaceholder } = unref(getProps)
|
||||
// 表单数据
|
||||
const formModel = reactive<Recordable>({})
|
||||
|
||||
// 监听表单结构化数组，重新生成formModel
|
||||
watch(
|
||||
() => schema,
|
||||
(schema) => {
|
||||
setModel(schema, formModel)
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
// 渲染包裹标签，是否使用栅格布局
|
||||
function renderWrap() {
|
||||
|
|
@ -67,20 +89,28 @@ export default defineComponent({
|
|||
|
||||
// 渲染formItem
|
||||
function renderFormItem(item: VFormSchema) {
|
||||
// 单独给只有options属性的组件做判断
|
||||
const notRenderOptions = ['SelectV2', 'Cascader']
|
||||
return (
|
||||
<ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
|
||||
{() => {
|
||||
const Com = componentMap[item.component as string] as ReturnType<typeof defineComponent>
|
||||
return (
|
||||
<Com
|
||||
vModel={formModel[item.field]}
|
||||
{...(autoSetPlaceholder && setTextPlaceholder(item))}
|
||||
{...setComponentProps(item.componentProps)}
|
||||
// 单独给SelectV2做判断
|
||||
options={item.component === 'SelectV2' ? item.options || [] : undefined}
|
||||
options={
|
||||
notRenderOptions.includes(item?.component as string)
|
||||
? item.options || []
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{{
|
||||
default: () =>
|
||||
item.options && item.component !== 'SelectV2' ? renderOptions(item) : undefined,
|
||||
default: (data: Recordable) =>
|
||||
item.options && item?.component !== 'SelectV2'
|
||||
? renderOptions(item, data)
|
||||
: undefined,
|
||||
...setItemComponentSlots(slots, item?.componentProps?.slots, item.field)
|
||||
}}
|
||||
</Com>
|
||||
|
|
@ -91,11 +121,14 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// 渲染options
|
||||
function renderOptions(item: VFormSchema) {
|
||||
function renderOptions(item: VFormSchema, data: Recordable) {
|
||||
switch (item.component) {
|
||||
case 'Select':
|
||||
const { renderSelectOptions } = useRenderSelect(slots)
|
||||
return renderSelectOptions(item)
|
||||
case 'Cascader':
|
||||
const { useRenderCascaderOptions } = useRenderCascader(slots)
|
||||
return useRenderCascaderOptions(item, data)
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
|
@ -104,7 +137,7 @@ export default defineComponent({
|
|||
// 过滤传入Form组件的属性
|
||||
function getFormBindValue() {
|
||||
// 避免在标签上出现多余的属性
|
||||
const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom']
|
||||
const delKeys = ['schema', 'isCol', 'autoSetPlaceholder', 'isCustom', 'model']
|
||||
const props = { ...unref(getProps) }
|
||||
for (const key in props) {
|
||||
if (delKeys.indexOf(key) !== -1) {
|
||||
|
|
@ -115,7 +148,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
return () => (
|
||||
<ElForm ref={formRef} {...getFormBindValue()}>
|
||||
<ElForm ref={formRef} {...getFormBindValue()} model={formModel}>
|
||||
{{
|
||||
// 如果需要自定义，就什么都不渲染，而是提供默认插槽
|
||||
default: () => (isCustom ? getSlot(slots, 'default') : renderWrap())
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { Slots } from 'vue'
|
||||
import { getSlot } from '@/utils/tsxHelper'
|
||||
|
||||
// 这个可能是element-plus的BUG，需要这么处理，才能渲染出来。
|
||||
export function useRenderCascader(slots: Slots) {
|
||||
function useRenderCascaderOptions(item: VFormSchema, data: Recordable) {
|
||||
return (
|
||||
<span>
|
||||
{{
|
||||
default: () => {
|
||||
return item?.componentProps?.slots?.default
|
||||
? getSlot(slots, `${item.field}-default`, data)
|
||||
: data?.data[item?.optionsField?.labelField || 'label']
|
||||
}
|
||||
}}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
useRenderCascaderOptions
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
import { shallowRef } from 'vue'
|
||||
import { isFunction } from '@/utils/is'
|
||||
import { unref } from 'vue'
|
||||
import { Slots } from 'vue'
|
||||
import { getSlot } from '@/utils/tsxHelper'
|
||||
|
||||
|
|
@ -71,27 +70,35 @@ export function setGridProp(col: ColProps = {}): ColProps {
|
|||
return colProps
|
||||
}
|
||||
|
||||
type ComponentPropsModel = {
|
||||
clearable: boolean
|
||||
} & Recordable
|
||||
|
||||
/**
|
||||
*
|
||||
* @param props 传入的组件属性
|
||||
* @returns 默认添加 clearable 属性
|
||||
*/
|
||||
export function setComponentProps(props: Recordable = {}): ComponentPropsModel {
|
||||
for (const key in props) {
|
||||
// 如果传入的是组件，需要让其失去响应式，避免不必要的性能开销
|
||||
// 这样判断好像还不太合理。后续看看没有更合理的判断方法
|
||||
if (props[key]?.render && isFunction(props[key]?.render)) {
|
||||
props[key] = shallowRef(props[key]?.render())
|
||||
}
|
||||
}
|
||||
const componentProps: ComponentPropsModel = {
|
||||
export function setComponentProps(props: Recordable = {}): Recordable {
|
||||
const propsObj = unref(props)
|
||||
// for (const key in propsObj) {
|
||||
// // 如果传入的是组件，需要让其失去响应式，避免不必要的性能开销
|
||||
// // 这样判断好像还不太合理。后续看看没有更合理的判断方法
|
||||
// if (propsObj[key]?.render && isFunction(propsObj[key]?.render)) {
|
||||
// propsObj[key] = shallowRef(propsObj[key]?.render())
|
||||
// }
|
||||
// // if (key === 'icon') {
|
||||
// // propsObj[key] = [...propsObj[key]]
|
||||
// // }
|
||||
// }
|
||||
const componentProps: Recordable = {
|
||||
clearable: true,
|
||||
...props
|
||||
...propsObj
|
||||
}
|
||||
// componentProps.icons
|
||||
// ? (componentProps.icons = (componentProps.icons as Recordable[]).map((v) => {
|
||||
// return shallowRef(v?.render()?.value)
|
||||
// }))
|
||||
// : undefined
|
||||
// 需要删除额外的属性
|
||||
delete componentProps?.slots
|
||||
console.log(componentProps)
|
||||
return componentProps
|
||||
}
|
||||
|
||||
|
|
@ -118,4 +125,21 @@ export function setItemComponentSlots(
|
|||
return slotObj
|
||||
}
|
||||
|
||||
export function setModel() {}
|
||||
/**
|
||||
*
|
||||
* @param schema Form表单结构化数组
|
||||
* @param formModel FormMoel
|
||||
* @description 生成对应的formModel
|
||||
*/
|
||||
export function setModel(schema: VFormSchema[], formModel: Recordable) {
|
||||
schema.map((v) => {
|
||||
// 如果是hidden，就删除对应的值
|
||||
if (v.hidden) {
|
||||
delete formModel[v.field]
|
||||
} else {
|
||||
const hasField = Reflect.has(formModel, v.field)
|
||||
// 如果先前已经有值存在，则不进行重新赋值，而是采用现有的值
|
||||
formModel[v.field] = hasField ? formModel[v.field] : v.value !== void 0 ? v.value : ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ export default {
|
|||
autocomplete: 'Autocomplete',
|
||||
select: 'Select',
|
||||
group: 'Select Group',
|
||||
selectV2: 'SelectV2'
|
||||
selectV2: 'SelectV2',
|
||||
cascader: 'Cascader',
|
||||
switch: 'Switch',
|
||||
rate: 'Rate'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ export default {
|
|||
autocomplete: '自动补全',
|
||||
select: '选择器',
|
||||
group: '选项分组',
|
||||
selectV2: '虚拟列表选择器'
|
||||
selectV2: '虚拟列表选择器',
|
||||
cascader: '级联选择器',
|
||||
switch: '开关',
|
||||
rate: '评分'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ declare global {
|
|||
tag?: string
|
||||
}
|
||||
|
||||
declare type FormValueTypes = string | number | string[] | number[] | boolean | undefined
|
||||
declare type FormValueTypes = string | number | string[] | number[] | boolean | undefined | null
|
||||
|
||||
declare interface FormItemRule extends RuleItem {
|
||||
trigger?: string
|
||||
|
|
@ -68,17 +68,30 @@ declare global {
|
|||
}
|
||||
|
||||
declare type VFormSchema = {
|
||||
// 唯一值
|
||||
field: string
|
||||
// 标题
|
||||
label?: string
|
||||
// col组件属性
|
||||
colProps?: ColProps
|
||||
componentProps?: Recordable
|
||||
// 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
|
||||
componentProps?: { slots?: Recordable } & Recordable
|
||||
// formItem组件属性
|
||||
formItemProps?: FormItemProps
|
||||
// 渲染的组件
|
||||
component?: ComponentName
|
||||
// 初始值
|
||||
value?: FormValueTypes
|
||||
// 下拉选项
|
||||
options?: FormOptions[]
|
||||
// 下拉选项别名
|
||||
optionsField?: FormOptionsAlias
|
||||
// 下拉选项插槽，规则：${field}-option
|
||||
optionsSlot?: boolean
|
||||
// 是否隐藏
|
||||
hidden?: boolean
|
||||
// 表单组件插槽，规则：${field}
|
||||
slot?: boolean
|
||||
}
|
||||
|
||||
// VForm types end
|
||||
|
|
|
|||
|
|
@ -36,7 +36,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
|||
VueJsx(),
|
||||
WindiCSS(),
|
||||
StyleImport({
|
||||
resolves: [ElementPlusResolve()]
|
||||
resolves: [ElementPlusResolve()],
|
||||
libs: [{
|
||||
libraryName: 'element-plus',
|
||||
esModule: true,
|
||||
resolveStyle: (name) => {
|
||||
return `element-plus/es/components/${name.substring(3)}/style/css`
|
||||
}
|
||||
}]
|
||||
}),
|
||||
// AutoImport({
|
||||
// imports: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue