f2c网站建设,手机免费注册,福州开发企业网站,手机网站建设创意新颖需求
当前需求是由于部分按钮操作的执行时间过长#xff0c;因此添加遮罩层#xff0c;防止用户误操作。
实现方式
在请求接口时创建遮罩层#xff0c;并将遮罩层保存为全局唯一#xff0c;请求成功或失败时#xff0c;关闭遮罩层即可#xff0c;切记#xff0c;请求…需求
当前需求是由于部分按钮操作的执行时间过长因此添加遮罩层防止用户误操作。
实现方式
在请求接口时创建遮罩层并将遮罩层保存为全局唯一请求成功或失败时关闭遮罩层即可切记请求失败时一定要记得关闭。
公共方法
遮罩层的样式可自定义修改 // loading.js import { Loading } from element-ui; import store from /store/index.js; /** * 展示遮罩层 * param {*} text 遮罩层显示的文本信息 */ export const showLoading (text) { // 先进行关闭 hideLoading() // 创建遮罩层 let loadingInstance Loading.service( { text : text, lock: true, spinner: el-icon-loading, background: rgba(0, 0, 0, 0.7) } ); // 定义全局 store.commit(SET_LOADING_INSTANCE, loadingInstance); } /** * 隐藏遮罩层 */ export const hideLoading () { // 隐藏 loading 的逻辑 let loadingInstance store.getters.loadingInstance if (loadingInstance loadingInstance ! null) { loadingInstance.close(); store.commit(SET_LOADING_INSTANCE, null); } } 调用方式 import {showLoading, hideLoading} from /util/loading; // 在需要的地方去调用 // 弹出遮罩层 showLoading(loading) 发送请求.then(res { this.$message({ type: success, message: res.data.msg }); hideLoading() // 刷新界面 this.handleRefresh() })
