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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

郭生生 2019-08-17 10:09:51 浏览2103
展开阅读全文

最近新学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});
 },
 },
 });

网友评论

登录后评论
0/500
评论
郭生生
+ 关注