首先安装依赖:
npm i @form-create/element-ui@指定版本号
main.js中引入
//main.js
import formCreate from '@form-create/element-ui'
Vue.use(formCreate);
使用组件模式,在要使用到的页面写,绑定的数据推荐放在另外的js文件里面统一管理
<form-create
v-model="userForm.formEle"
:rule="userForm.rule"
:option="userForm.option">
</form-create>
<script>
import { userForm } from "../../components/configure/form/form.js";
export default {
data() {
return {
userForm:userForm,
};
},
}
<script>
这是对应的配置js文件
//form.js
export const userForm = {
//实例对象
formEle: {},
//表单数据
formData: {},
//组件参数配置
option: {
form: {
inline: true, //行内表单模式
labelWidth: "auto",
},
row: {
//栅格间隔
gutter: 0,
//布局模式,可选 flex,现代浏览器下有效
type: "",
//flex 布局下的垂直排列方式 top/middle/bottom
align: "middle",
//flex 布局下的水平排列方式 start/end/center/space-around/space-between
justify: "start",
},
submitBtn: false,
},
//表单生成规则
rule: [
{
type: "input",
title: "商品名称",
field: "good",
value: "1",
col: {
span: 12,
labelWidth: 150,
},
props: {
size: "medium",
maxlength: "",
placeholder: "商品名称",
clearable: true,
},
validate: [
{ required: true, message: "请输入商品名称", trigger: "blur" },
],
// on: {
// "blur": function () {
// console.log(22);
// },
// },
emit:['change'],
emitPrefix:'good'
},
],
btns: [
{
title: "清除条件",
id: "clear",
type: "text",
show: false,
inputSize: "small",
icon: "el-icon-delete",
},
{
title: "查询",
id: "look",
type: "primary",
show: false,
inputSize: "small",
icon: "el-icon-search",
},
{
title: "导出",
id: "export",
type: "primary",
show: false,
inputSize: "small",
icon: "el-icon-plus",
},
],
};
绑定事件有好几种:
第一种就是注释了的,在配置文件中直接使用on:{},里面写事件,
第二种就是通过emit触发使用的页面的方法,
emit:['change'],//change事件
emitPrefix:'good'//自定义事件前缀(如果不指定,默认就是field的value)
//然后在页面里面通过自定义事件,固定写法,@自定义前缀-事件名="你自己的方法名"
<form-create @good-change="change"/>
//然后再methed里面定义change方法,就好了
觉得上面这种写在标签里不好看的,还有另外一个写法
//在mounted里面通过on监听实例上的good-change方法,后面就是methed里面你自己的方法
mounted () {
this.userForm.formEle.on('good-change',this.change)
},
methods: {
change(){
alert(1)
},
}
监听组件原生事件
emitPrefix:'good',
nativeEmit:['click'],//emit换成nativeEmit
//在页面里面
mounted () {
this.userForm.formEle.on('native-good-click',this.click)//调用methed里面的click方法
},
methods: {
click(){
alert(1)
},
}