码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-11-05 22:50:39      阅读:637      评论:0      收藏:0      [点我收藏+]

标签:lin   nat   保存   方法   export   BMI   add   表单   通用   

一.阻止表单自动提交刷新页面:
<
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,引入全局公共方法。

 

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

标签:lin   nat   保存   方法   export   BMI   add   表单   通用   

原文地址:https://www.cnblogs.com/tiantianleyuan123/p/9912084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!