美文网首页
Vform Vue3自定义组件(vant篇)

Vform Vue3自定义组件(vant篇)

作者: 大码猴 | 来源:发表于2022-04-21 15:28 被阅读0次
一、引入Vant
npm i vant -S
二、因为vform使用的是vite,所以直接配置vite相关内容
// 引入vite-plugin-style-import插件,方便自动按需引入组件样式
npm i vite-plugin-style-import@1.4.1 -D
// 配置插件
vite.config.js
import styleImport, { VantResolve } from 'vite-plugin-style-import';
plugins: [
    styleImport({
      resolves: [VantResolve()],
    }),
],
三、引入组件
main.js
import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);
四、定义组件
  1. extension的samples文件夹中新建组件,注意名称必须携带-widget,因为之后的拖拽加载是通过component的:is=“{{type}}-widget”
  2. 参照alert-widget书写非容器组件(字段组件)代码
  3. 参照card-widget书写容器组件代码
  4. 配置属性扩展,extension-schema.js中,根据组件属性进行配置,
    属性说明:
    type:必须是新建组件的名称,例如组件名为cell-widget.vue,type必须为cell。原因参照(1),i18通过type显示容器名称。需要在lang的en-US_extension.js和zh-CN_extension.js的widgetLabel中配置type对应的名称。
    category:容器类型,container容器组件,其他为字段组件
    icon: 容器中显示的图标,可通过iconfont.cn进行下载引入展示
    formItemFlag:是否嵌套el-form-item组件内,因为不使用elment,所以写false
    options:为组件属性,配置属性后可在组件类中通过field.options.xxxx进行绑定
  5. 引入组件,并加载属性编译器extension-loader.js
(1)引入组件属性扩展
import {cellSchema} from "@/extension/samples/extension-schema"
(2)引入组件
import CellWidget from '@/extension/samples/vantwidget/cell/cell-widget'
(3)引入SFC配置(在‘6’中说明SFC代码配置)
import {cellTemplateGenerator} from '@/extension/samples/extension-sfc-generator'
(4)加载属性扩展
addCustomWidgetSchema(cellSchema)  //加载组件Json Schema
(5)注册组件
app.component(CellWidget.name, CellWidget)
(6)注册主页面右侧属性配置器
PERegister.registerCPEditor(app, 'cell-title', 'cell-title-editor',
    PEFactory.createInputTextEditor('title', 'extension.setting.title'))
方法说明:propertyRegister.js  property-editor-factory.js
        registerCPEditor: 注册常见属性对应的属性编辑器
        createInputTextEditor:注册输入框属性编辑器
        createBooleanEditor:注册Boolean属性编辑器
        ……
        更多配置参照:propertyRegister.js  property-editor-factory.js
(7)注册SFC代码生成器
    registerFWGenerator('cell', cellTemplateGenerator)
  1. 编辑SFC代码生成器 extension-sfc-generator.js
    export const cellTemplateGenerator = function (fw, formConfig) {
        // 重新编译属性(固定属性)
        const wop = fw.options
        const titleAttr = `:title="${wop.title}"`
        const valueAttr = `:value="${wop.value}"`
        const labelAttr = `:label="${wop.label}"`
        const sizeAttr = `:size="${wop.size}"`
        const iconAttr = `:icon="${wop.icon}"`
        const borderAttr = `:border="${wop.border}"`
        const islinkAttr = `:is-link="${wop.islink}"`
        const requiredAttr = `:required="${wop.required}"`
        const centerAttr = `:center="${wop.center}"`
        const arrowDirectionAttr = `:arrow-direction="${wop.arrowDirection}"`
        const clickAttr = `@click="${wop.onClick}"`

        /**
        * 重新编译属性(form动态属性)
        * 参照sfc-generator.js的getFlAttrs()方法,新增form属性可在该方法进行配置
        */ 
            // const {vModel, readonly, disabled, size, type, showPassword, placeholder, clearable,
    //   minlength, maxlength, showWordLimit, prefixIcon, suffixIcon, appendButtonChild, value} = getElAttrs(fw, formConfig)
    // return `<el-input ${vModel} ${readonly} ${disabled} ${size} ${type} ${showPassword} ${placeholder} ${clearable}
    //         ${minlength} ${maxlength} ${showWordLimit} ${prefixIcon} ${suffixIcon}>${appendButtonChild}</el-input>`

    // SFC支持导出任意组件
    const cellTemplate =
        `<van-cell ${value}></van-cell>`
        
    // 导出template,提供给extension-loader.js中进行SFC加载
    return cellTemplate
}

至此vForm3中引入vant组件功能(字段组件)完全实现

五、其他类功能说明,(看到哪里更新到哪里)

1、src->extension自定义组件主要文件夹

    extension—>samples组件生成,属性配置,sfc配置文件夹
        samples—>extension-schema.js 属性配置器
        samples—>extension-sfc-generator.js sfc配置器
    extension—>extension-helper.js 公共方法引入
    extension—>extension-loader.js 自定义组件配置主要类,加载属性编译器,引入组件,配置sfc等功能

2、src->utils 公共属性配置文件夹

    utils—>sfcgenerator.js sfc属性及组件配置
        registerFWGenerator 注册字段组件的代码生成器

3、src—>form-designer 主工程编译器

    form-designer—>index.vue 页面配置,左侧容器,中间组价配置器,右侧属性配置器
    form-designer—>form-widget 组件主控制类
        form-widget —>container-widget默认配置的容器组件
        form-widget —>field-widget默认配置的字段组件
        form-widget —>index.vue拖拽以后显示组件控制器,通过component is加载组件
    form-designer—>setting-panel 组件属性控制
        setting-panel—>index.vue 组件属性生成类,Boolean、select、input等
    form-designer—>toolbar-panel 顶部工具类
        toolbar-panel—>index.vue 主页面工具类实现,PC、Pad、H5、清空等功能
    form-designer—>widget-panel 左侧组件类型配置器

相关文章

网友评论

      本文标题:Vform Vue3自定义组件(vant篇)

      本文链接:https://www.haomeiwen.com/subject/dpgiertx.html