在 Vform2 的 input 组件上添加一个自定义属性 xxx,并展示其效果。

1. 安装 Vform2:

bash
npm install vform2

2. 在项目中引入 Vform2:

js
import Vue from 'vue'
import Vform from 'vform2'
import 'vform2/dist/vform.css'

Vue.use(Vform)

3. 在 src/widgetsConfig.js 中找到 input 配置,添加 xxx 属性:

js
{
  type: 'input',
  // ...   
  props: {
    xxx: {
      type: Boolean,
      default: true
    }
  }
} 

4. 在 src/property-editors/ 下添加 xxx-editor.vue,定义 xxx 属性的编辑器:

vue
<template>
  <el-switch v-model="value"></el-switch>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    }
  }
}
</script>

5. 在 src/propertyRegister.js 中注册 xxx 属性和编辑器的映射:

js
import XxxEditor from './property-editors/xxx-editor'

// ...
propertyRegister.register(
  'xxx',  
  {
    editor: XxxEditor
  }  
)

6. 修改 src/components/input.vue,增加 xxx 属性并在模板中使用:

vue
<template>
  <el-input :value="value" @input="onInput" :xxx="xxxValue">  
</template>

<script>
export default {
  props: {
    xxx: {
      type: Boolean,
      default: true
    }   
  },
  computed: {
    xxxValue() {
      return this.xxx
    }   
  }  
} 
</script>

7. 运行 npm run dev,并设计一个有 input 组件的表单,可以看到 input 现在有一个 xxx 属性。

8. 设置 xxx 为 true,保存设计,可以看到 input 在模板中使用了 :xxx="xxxValue"

以上就是完整的在 Vform2  input 组件上添加 xxx 自定义属性的示例。