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

junner443

已于 2023-06-20 10:50:28 修改

阅读量479

点赞数

分类专栏： vue3组件库文章标签：前端 vue.js typescript

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

本文链接：https://blog.csdn.net/junner443/article/details/131301803

版权

背景

基于之前组件库的基础上，其实，我们所有的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'