vant增加全局遮罩层

<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>

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;

import Vue from "vue";
import loadingIndex from "./loading/loadingIndex";
Vue.use(loadingIndex);

showloading() {
    var title = "加载中···";
    this.$showLoading({
      title: title
    });
  }

  hideloading() {
    this.$cancelLoading();
  }