专栏首页小神仙vant增加全局遮罩层

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Enum扩展特性,代替中文属性

    把原文中的out参数替换成返回元组,由于项目是vs2015开发,不能用c#7.0特性,否则用7.0中的值元组应该更好一点。性能和显示友好性都会有改进。

    用户6362579
  • 简单五子棋,没有电脑AI

      刚学了C#委托,做了个五子棋练习,把前台绘制和后台逻辑分开,前台绘制方法用委托传给后台逻辑。

    用户6362579
  • Linq调试实时输出信息扩展方法(摘抄)

    用户6362579
  • 爬取三好学生博客

    在前端取内容,我们可以使用beautifulsoup模块,如取个title直接用以下方法即可:

    Jumbo
  • leetcode题解-53.最大子序和

    Given an integer array nums, find the contiguous subarray (containing at least o...

    编程珠玑
  • IDEA 配置 Vue 支持

    似水的流年
  • 算出实体箱子之间可以存多少水

    出题 ? 下午,群里面有同学出了一个简单的算法题,意思是一个房间内,有多个1立方米的箱子,多个箱子可以垂直落在一起,问:剩下的空间可以存多少立方的水(如图)。 ...

    春哥大魔王
  • 深入理解String,StringBuilder,StringBuffer

    从上面的三个方法可以看出,无论是subString、concat还是replace操作都不是在原有的字符串上进行的,而是重新生成了一个新的字符串对象。也就是说进...

    yesr
  • 老瓶装新酒 - C#调用WM手机发送短信(源码)

    一些系统,需要能够发送短信,量很小,平均每日10条。 运营商平台太贵,白名单很严格,小额只能发省内; 各短信平台有各种限制,大事件前后会关闭; 飞信以前可以用W...

    大石头
  • python3 requests 抓取乱

    遇到此问题后 设置r.encoding='gbk'或r.encoding='gb2312'后可以了

    py3study

扫码关注云+社区

领取腾讯云代金券