vant增加全局遮罩層

vant默認提供的加載遮罩太水了，也可能是我太水了不會用，所以找大神寫了一個，我抄過來了

---

增加遮罩控件

在任意位置增加如下兩個文件，注意loadingIndex.js引用loading.vue時路徑要修改成你的：

1. 模板文件：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>

2. 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();
  }