Vue开发一个loading插件

最新推荐文章于 2024-07-19 20:55:59 发布

原创最新推荐文章于 2024-07-19 20:55:59 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #插件

vue 同时被 2 个专栏收录

53 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

本文介绍了一个基于Vue的加载动画插件实现方法。通过创建一个独立的Vue组件并在全局注册，可以方便地在应用程序中调用加载动画的显示与隐藏。文章详细展示了如何设置组件属性、模板以及样式。

目录结构

|-- loading
    |-- index.js
    |-- loading.vue

index.js

import Vue from 'vue';
import lodingComponet from './loading.vue';
const Loading = Vue.extend(lodingComponet);
let instance = new Loading({
  el: document.createElement('div')
});

let loading = {
  /**
   * 显示
   */
  show() {
    instance.vm = instance.$mount();
    document.body.appendChild(instance.vm.$el);
    instance.show = true;
  },
  /**
   * 隐藏
   */
  hide() {
    instance.show = false;
  }
};

export default {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function() {
    Vue.prototype.$loading = loading;
    return loading;
  }
};

loading.vue

<template>
    <div v-if="show" class="loding">
        <img src="/static/images/loding.gif">
    </div>
</template>

<script>
export default {
    name: 'loding',
    props: {
        show: {
            type: Boolean,
            default: false
        }
    }
};
</script>
<style lang="scss">
.loding {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    text-align: center;
}
.loding img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%) scale(0.8);
}
.loding-full {
    background: rgba(255, 255, 255, 0.3);
}
</style>

使用

//应用
import lodingPlugins from '@/plugins/loading'; //加载动画
const loading = lodingPlugins.install();
loading.show();