vue3+ts组件库同时兼容多种ui框架

原创

已于 2023-06-20 10:50:28 修改 · 764 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #typescript

于 2023-06-20 10:38:02 首次发布

该博客介绍了如何创建一个Vue3+TS组件库，使其能同时兼容Element Plus和Ant Design Vue。作者指出，由于两种框架API的相似性，组件库的schema配置可以与UI框架解耦。目标是构建一套独立于特定UI框架的基础组件库，适用于Vue2、Vue3和React。目前重点是实现nowayForm-vue3。实现方法是通过全局变量动态选择使用哪个UI框架的组件，但这种方法存在需要全局引入UI框架和少量冗余代码的缺点。源码细节和更多实现可在链接中查看。

背景

基于之前组件库的基础上，其实，我们所有的schema配置都与ui层面没有关系，并且发现ant和element框架api大同小异，对于基于element开发出来的schema，初步核对了一下，ant上也是可行的；如下配置，完全与ui无关，与element和ant api初步核对确实可行：

const config = reactive<formConfig>({
  // colNum: 6,
  labelWidth: '100px',
  disabled: false,
  loading: false,
  isExport: true,
  columns: [
    {
      label: '业务域',
      prop: 'businessDomain',
      type: 'select',
      required: false,
      disabled: false,
      options: {
        type: 'api',
        getData: () => {
          return new Promise(async(resolve) => {
            const api: MonitoringPlatform = new MonitoringPlatform()
            const res = await api.monitoringPlatformConfigQueryBusinessDomain()
            if (res?.success) {
              resolve(res?.data.map((item: string) => ({
                label: item,
                value: item,
              })) ?? [])
            } else {
              resolve([])
            }
          })
        },
      },
      change: async(e: any) => {
        const options = await getBusinessScenarioOptions(e.value)
        // 清除业务场景&问题场景表单值
        form.value.businessScenario = ''
        form.value.errorType = ''
        // 修改业务场景options / 启禁用
        const businessScenarioItem = config.columns[getColumnIndex(config.columns, 'businessScenario')]  as selectProps
        businessScenarioItem.options = options
        businessScenarioItem.disabled = !e.value
        // 清空问题场景 option / 启禁用
        const errorTypeItem = config.columns[getColumnIndex(config.columns, 'errorType'

最低0.47元/天解锁文章