html增加全局遮罩,vant增加全局遮罩层

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

增加遮罩控件

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

模板文件：loading.vue

:show="isShow"

:custom-style="{

background: 'rgb(255, 255, 255, 0.6)',

display: 'flex',

justifyContent: 'center',

paddingTop: '100px'

}"

>

{{ title || '加载中···' }}

js文件：loadingIndex.js

import 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();

}