vant增加全局遮罩层---用户6362579

vant默认提供的加载遮罩太水了，也可能是我太水了不会用，所以找大神写了一个，我抄过来了

增加遮罩控件

在任意位置增加如下两个文件，注意loadingIndex.js引用loading.vue时路径要修改成你的：

模板文件：loading.vue<template> <div> <van-overlay :show="isShow" :custom-style="{ background: 'rgb(255, 255, 255, 0.6)', display: 'flex', justifyContent: 'center', paddingTop: '100px' }" > <van-loading size="24px" color="#4994df"> <span style="color:#4994df">{{ title || '加载中···' }}</span> </van-loading> </van-overlay> </div> </template>js文件：loadingIndex.jsimport vue from 'vue' import loadingComponent from './loading.vue' const LoadingConstructor = vue.extend(loadingComponent) let toastDom, el; function showLoading({ title, type, duration = 2000 }) { if (!el && !toastDom) { el = document.createElement('div'); toastDom = new LoadingConstructor({ el, data() { return { isShow: true, // 是否显示 title // 文本内容 }; } }); // 添加节点 document.body.appendChild(toastDom.$el); } else { toastDom.isShow = true; } } function cancelLoading() { if (toastDom) { toastDom.isShow = false; } } // 全局注册 function registryToast() { vue.prototype.$showLoading = showLoading; vue.prototype.$cancelLoading = cancelLoading; } export default registryToast;在vue中引用控件

在你引用vue的地方增加如下代码,注意路径改为你的路径

import Vue from "vue"; import loadingIndex from "./loading/loadingIndex"; Vue.use(loadingIndex);使用遮罩

然后你就可以像下面一样使用遮罩了：

showloading() { var title = "加载中···"; this.$showLoading({ title: title }); } hideloading() { this.$cancelLoading(); } ---来自腾讯云社区的---用户6362579