基于weui loading插件封装

分手后的思念是犯贱 2021-12-14 10:41 421阅读 0赞

<template>
      <div id="loadingToast" v-if="show">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
          <i class="weui-loading weui-icon_toast"></i>
          <p class="weui-toast__content" v-if="text">{
        {text}}</p>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        text: {
          type: String,
          default: ''
        },
        show: Boolean
      }
    };
    </script>
        
    <style>
    </style>

// loading.js
    import LoadingComponent from './Loading.vue'
    
    let $vm
    
    export default {
      install(Vue, options) {
        if (!$vm) {
          const LoadingPlugin = Vue.extend(LoadingComponent);
    
          $vm = new LoadingPlugin({
            el: document.createElement('div')
          });
    
          document.body.appendChild($vm.$el);
        }
    
        $vm.show = false;
    
        let loading = {
          show(text) {
            $vm.show = true;
            $vm.text = text;
          },
          hide() {
            $vm.show = false;
          }
        };
    
        if (!Vue.$loading) {
          Vue.$loading = loading;
        }
    
        Vue.mixin({
          created() {
            this.$loading = Vue.$loading;
          }
        })
      }
    }

// main.js
    
    import Loading from 'views/common/baseui/loading'
    Vue.use(Loading);

调用:

mounted () {
        this.$loading.show();
        let _ = this
        setTimeout(() => {
           _.$loading.hide();
         }, 5000)
       },

转载于:https://www.cnblogs.com/qiezuimh/p/11043721.html

发表评论取消回复

表情：

评论列表（有 0 条评论，421人围观）

还没有评论，来说两句吧...

相关阅读

相关基于Vue封装酷炫进度条插件

目录效果如下：源码： -------------------- 效果如下： ![b0b0acd77c014750964e430c35bf701b.gif][

Bertha 。/ 2023年09月27日 12:03/ 0 赞/ 186 阅读

相关 jquery封装插件的方法

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。一、入门编写一个jQuer

比眉伴天荒/ 2022年07月15日 12:16/ 0 赞/ 220 阅读

相关 jquery封装插件的方法

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。一、入门编写一个jQuer

短命女/ 2022年07月15日 12:16/ 0 赞/ 232 阅读

相关 jquery之封装插件

今天就讲一下jquery封装插件的方法吧，看完这个，你就会认识到jquery里面好多功能的由来，以后也不用对jquery那么陌生了，会有一种亲近感了，嘻嘻。不过我们现在还

男娘i/ 2022年07月11日 11:09/ 0 赞/ 417 阅读

相关插件封装2(boot风格)

html1： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <

青旅半醒/ 2022年06月02日 23:41/ 0 赞/ 147 阅读

相关插件封装(boot风格)

源码： <!DOCTYPE HTML> <html> <head> <title>读取并修改元素的属性</title> <meta c

秒速五厘米/ 2022年06月02日 23:28/ 0 赞/ 194 阅读

相关 Angular 版 WeUI 组件 ngx-weui

ngx-weui 详细介绍 [WeUI][] Components build with [Angular][]. [在线示例][Link 1]以及[API文档][API]

Dear 丶/ 2022年05月19日 01:29/ 0 赞/ 325 阅读

相关 Vue Loading插件

![图片描述][bVbnxRY_w_115_h_114] > 基于vue全家桶目录结构 ├── components │ ├── Loading

旧城等待，/ 2022年01月31日 09:41/ 0 赞/ 414 阅读

相关基于weui loading插件封装

<template> <div id="loadingToast" v-if="show">

分手后的思念是犯贱/ 2021年12月14日 10:41/ 0 赞/ 422 阅读

相关 jquery插件封装指南

入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称： jQuery.fn.myPlugin

╰半夏微凉°/ 2021年09月14日 07:00/ 0 赞/ 580 阅读