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

简介: 最近新学Vue,后台开发中经常用到提交,索性把提交功能给做成全局方法,下面为封装的代码。//封装默认提交方法Vue.prototype.mySubmit = function (options) { var that = this; //避免this指向被改变 var url = options.

最近新学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});
 },
 },
 });
相关文章
|
3天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
12 5
|
22天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
22天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
27天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
28天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
93 4
|
22天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
29天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
30天前
|
JavaScript 前端开发 Java
vue2知识点:Vue封装的过度与动画
vue2知识点:Vue封装的过度与动画
14 0
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
下一篇
无影云桌面