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"></span>
      </van-loading>
    </van-overlay>
  </div>
</template>

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

本文会经常更新，请阅读原文： https://dashenxian.github.io/post/vant%E5%A2%9E%E5%8A%A0%E5%85%A8%E5%B1%80%E9%81%AE%E7%BD%A9%E5%B1%82 ，以避免陈旧错误知识的误导，同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名 小神仙 （包含链接： https://dashenxian.github.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 (125880321@qq.com) 。