vform3 增加表单组件自定义属性

1、克隆VForm3源码

https://gitee.com/vdpadmin/variant-form3-vite

2、安装依赖

yarn --registry=https://registry.npmmirror.com

3、修改 “src/commponents/form-designer/setting-panel/propertyRegister.js”

在 COMMON_PROPERTIES 中增加属性

  'sceneGroup'        :            'sceneGroup-editor',// 新增属性，场景分组
  'queryType'         :            'queryType-editor',// 新增属性，查询类型

4、修改 “src/lang/zh-CN.js”

在 setting 中增加中文配置

      sceneGroup: '场景分组',
      queryType: '查询类型',

5、修改 “src/commponents/form-designer/widget-panel/widgetsConfig.js”

在 basicFields 的组件中增加配置

      sceneGroup: '', // 新增属性，场景分组
      queryType: '', // 新增属性，查询类型

6、增加属性编辑器

在 “src/commponents/form-designer/setting-panel/property-editor/” 目录下增加

sceneGroup-editor.vue

<template>
  <el-form-item :label="i18nt('designer.setting.queryType')">
    <el-select v-model="optionModel.queryType">
      <el-option v-for="item in queryType" :key="item.value" :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  import i18n from "@/utils/i18n"

  export default {
    name: "queryType-editor",
    mixins: [i18n],
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    data() {
      return {
        queryType: [
          {label: '-', value: ''},
          {label: '等于', value: 'EQ'},
          {label: '大于', value: 'GT'},
          {label: '大于等于', value: 'GE'},
          {label: '小于', value: 'LT'},
          {label: '小于等于', value: 'LE'},
          {label: '包含', value: 'LIKE'},
          {label: '左包含', value: 'LEFT_LIKE'},
          {label: '右包含', value: 'RIGHT_LIKE'},
          {label: '区间', value: 'BE'},
          {label: '不等于', value: 'NEQ'},
        ],

      }
    },

  }
</script>

<style scoped>

</style>

queryType-editor.vue

<template>
  <el-form-item>
    <template #label>
      <span>{{i18nt('designer.setting.sceneGroup')}}
      </span>
    </template>
    <el-select multiple allow-create filterable default-first-option
               v-model="optionModel.sceneGroup" style="width: 100%">
      <el-option v-for="(ft, ftIdx) in uploadSceneGroup"
                 :key="ftIdx"
                 :label="ft.label"
                 :value="ft.value">
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
  import i18n from "@/utils/i18n"
  import SvgIcon from "@/components/svg-icon/index";

  export default {
    name: "sceneGroup-editor",
    mixins: [i18n],
    components: {
      SvgIcon
    },
    props: {
      designer: Object,
      selectedWidget: Object,
      optionModel: Object,
    },
    data() {
      return {
        uploadSceneGroup: [
          {value: 'LIST', label: '列表'},
          {value: 'ADD', label: '新增'},
          {value: 'EDIT', label: '编辑'},
          {value: 'DETAIL', label: '详情'},
        ],
      }
    }
  }
</script>

<style scoped>

</style>

7、生成文件

npm run lib

8、安装到项目中

复制到自己的vue3项目中

配置vite.config.js

配置main.js

import VForm3 from '@/../lib/vform/designer.umd.js'
import '../lib/vform/designer.style.css'

app.use(VForm3)