前端开发：Vue封装一个公用的的Submit方法

最近新学Vue，后台开发中经常用到提交，索性把提交功能给做成全局方法，下面为封装的代码。

//封装默认提交方法 Vue.prototype.mySubmit = function (options) { var that = this; //避免this指向被改变 var url = options.url || location.href; var post = options.post || "post"; var data = options.data || {}; //要提交的数据 var callBack = options.callBack; var successMsg = options.successMsg || "恭喜你，提交成功！"; var confirmMsg = options.confirmMsg; //确定文字，如果有会先弹出是否确定按钮 varformName = options.formName; this.$refs["formName"].validate(function (valid) { if (valid) { if (confirmMsg) { that.$confirm(confirmMsg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', }).then(() => { submit(that); }).catch(() => { }); } else { submit(that); } } else { return false; } }); function submit(vue) { var loading = ELEMENT.Loading.service({ fullscreen: true }); var ajaxOptions = { url: url, type: "post", data: data, success: function (data) { ELEMENT.Message.success({ message: successMsg, }); loading.close(); if (typeof callBack == "function") { callBack(); } }, fail: function (data) { alert(data); loading.close(); } } Ajax(ajaxOptions); } } 

使用方法如下：

html部分：

<button type="button" v-on:click="submit" class="btn btn-primary">提交</button> 

js部分

var vue= new Vue({ el: "#el", data: { formData: {}, }, methods: { submit: function () { this.paSubmit({url:"/post/",data:this.formData}); }, }, });