前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端开发:Vue封装一个公用的的Submit方法

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

原创
作者头像
用户4831957
修改2019-08-19 17:09:28
8280
修改2019-08-19 17:09:28
举报
文章被收录于专栏:网站建设、网站制作专栏

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

代码语言:javascript
复制
//封装默认提交方法
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部分:

代码语言:javascript
复制
<button type="button" v-on:click="submit" class="btn btn-primary">提交</button>

js部分

代码语言:javascript
复制
 var vue= new Vue({
 el: "#el",
 data: {
 formData: {},
 },
 methods: {
 submit: function () {
 this.paSubmit({url:"/post/",data:this.formData});
 },
 },
 });

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档