vue el-form鼠标事件导致页面刷新解决方案；vue 阻止多次点击提交数据通用方法

Posted 2021-01-17 tiantianleyuan123

一.阻止表单自动提交刷新页面：
<el-form>
   <el-form-item  :inline="true" @submit.native.prevent>
       <el-input @keyup.enter.native=‘submit‘></el-input>
  </el-form-item>
</el-form>

注意： 鼠标事件导致页面刷新问题，在el-form上增加 @submit.native.prevent 可阻止页面刷新

二.阻止表单多次重复点击提交数据公共方法：

export default {}.install = (Vue, options = {}) => {
  Vue.directive(‘dbClick‘, {
    inserted(el, binding) {
      el.addEventListener(‘click‘, e => {
        if(!el.disabled) {
          el.disabled = true;
          let timer = setTimeout( () => {
            el.disabled = false;
          },1000)
        }
      })
    }
  })
}
用法：<el-button v-dbClick @click="saveOrder">保存</el-button>
在提交保存按钮出添加v-dbClick,引入全局公共方法。