vue-loading-new

Just another collection of loading spinners with Vue.js

Installation

npm install --save vue-loading-new

or

yarn add vue-loading-new

Usage

在页面引用

在App.vue 面页中引用CSS 
<style>
@import "~vue-loading-new/dist/vueLoadingNew.css";
</style>

<script>
  import loading from 'vue-loading-new';
  export default {
    data() {
      return {
        loads:null
      }
    },
    methods: {
      open(){
        this.loads=loading();
        setTimeout(() => {
          this.loads.close()
        }, 300);
      }
    }
  }
</script>

或 全局mixins中使用 
data() {
    return {
      loadingInstance: null,
      spinner: {
        show: res => {
          if (this.loadingInstance) {
            this.loadingInstance.close();
          }
          let options = {
            lock: true,
            target: null,
            text: '',
            type: 4,
            background: 'rgba(255, 255, 255, 0.6)',
            customClass: ''
          }
          Object.assign(options, res);
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            this.loadingInstance = Loading(options);
          });
        },
        close: res => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            if (this.loadingInstance) {
              this.loadingInstance.close();
            }
          });
        }
      }
    }
  },

  在页面中 使用 this.spinner.show() this.spinner.close();

配置

let config={
  text: "",
  type: 1,
  color: [],
  html: "",
  background: null,
  fullscreen: true,
  visible: true,
  customClass: '',
}

this.loads=loading(config);

切换图标 this.loads=loading({type:2});

html结合customClass，可打造自己的动态图片

Props

name	Description	type	default
isLoading	是否显示	Boolean	false
type	加载动态图	Int	1
text	文字显示	String	加载中...
color	图标颜色	array	空
background	背景设置	String	transparent
customClass	自定样试	String	空
fullscreen		boolean	ture
html	v-html	String	html

github:https://github.com/wyulang/vue-loading-spinners