element系列 - form 改造

210 阅读1分钟

系列

element系列 - input 改造

element系列 - select 改造

element系列 - form 改造

element系列 - tree 改造

element系列 - pagination 改造

需求

  • 阻止 el-form 默认submit提交

github项目地址

代码

import Vue from "vue";
import { Form } from "element-ui";
const elFormHack = {
  install: (Vue) => {
    /**
     * 给ElementUI from组件添加 阻止原生提交事件逻辑
     *
     * @see {@ https://element.eleme.io/#/zh-CN/component/form#form-item-methods}
     *
     */
    const eventPrevent = (e) => {
      e.preventDefault();
    };
    const autoPreventFormSubmitHack = {
      mounted() {
        this.$el.addEventListener("submit", eventPrevent);
      },
      beforeDestroy() {
        this.$el.removeEventListener("submit", eventPrevent);
      },
    };

    Object.assign(Form, {
      mixins: [...(Form.mixins || []), autoPreventFormSubmitHack],
    });

    Vue.use(Form);
  },
};
Vue.use(elFormHack);