vue2+element使用form-create绑定事件_formcreate submitbtn

首先安装依赖: 

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)
    },
}