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 自定义属性的示例。