【Vue3+Vite+TS】13.0 组件十:强大的表单组件(上)

功能

    1. 可配置型表单,通过json对象的方式自动生成表单
    1. 具备更完善的功能:表单验证、自定义验证规则、动态删减表单、集成第三方的插件
    1. 用法简单,扩展性强,可维护性强
    1. 能够用在更多的场景,比如弹框嵌套表单

准备工作

  1. 分析element-plus表单能够在那些方面做优化
  2. 完善封装表单的类型,支持ts
  3. 封装的表单要具备element-plus原表单的所有功能
  4. 集成第三方插件:markdown编辑器、富文本编辑器(
    比如WangEditor)

必备UI组件

将用到的组件:
很多,涉及到表单的所有组件。
第三方组件:WangEditor

组件设计

新建src\components\baseline\form\index.ts

import { App } from 'vue'
import Form from './src/index.vue'

export { Form }

//组件可通过use的形式使用
export default {
  Form,
    install(app: App) {
        app.component('bs-form', Form)
    },
}

调整src\components\baseline\index.ts

import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'
import Notification from './notification'
import List from './list'
import Menu from './menu'
import Progress from './progress'
import ChooseTime from './chooseTime'
import ChooseDate from './chooseDate'
import ChooseCity from './chooseCity'
import Form from './form'
const components = [
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
]
export {
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
}

//组件可通过use的形式使用
export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
}

路由增加,调整src\router\index.ts

   {
                path: '/form',
                component: () => import('../views/baseline/form/index.vue'),
            },

新增src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/componen
如若转载请注明原文及出处:https://www.dsiab.com/post/84553ed1-1976-433f-8b9e-270ec9e81c83
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。

评论: