vue-loading-spin

vue-loading-spin

vue-loading-spin是基于VUE实现的插件，同时也支持作为组件来使用。默认加载的图标是一个svg旋转的菊花，它用的是vue的默认插槽，也可以根据实际的业务需要自定义其他图标。

运行项目

clone项目到本地，进入项目文件夹，安装依赖

git clone https://github.com/yujinjin/vue-loading-spin.git
cd loading
npm install

运行demo，会自动打开浏览器地址运行

npm run demo

编译打包项目

npm run compile

NPM

npm install vue-loading-spin

依赖

• VUE

使用

作为插件

import Vue from 'vue'
import Loading from 'vue-loading-spin'
import 'vue-loading-spin/dist/loading.css'
 
// VUE use
Vue.use(Loading);
// or with options
Vue.use(Loading, {
    isFixed: true, // 是否固定位置，默认为true
    isComponent: true, // 是否自动注册为全局组件，如果设置为false就不会注册成组件来使用
    isShowAnimation: true // 是否显示动画效果，默认为true
});
 

作为JS 对象
```javascript
import Loading from 'vue-loading-spin'
import 'vue-loading-spin/dist/loading.css'

let loading = Loading.get({});
loading.showLoading();
loading.hideLoading();
loading.showNetTimeout();

配置选项

名称	描述	默认值	可选项
isFixed	是否生成绝对定位的元素，相对于浏览器窗口进行定位。	全局属性时是：true,全局组件时是：false	Boolean
isShowMask	是否显示遮罩背景	false	Boolean
autoRefresh	是否（点击）自动刷新	false	Boolean
isShowAnimation	是否显示动画（fadeIn）效果	false	Boolean
indicatorText	提示文案	加载中...	String

API

1. 默认实例方法

默认实例方法，有三个参数，可以一个都不传。默认三个参数：isShowMask = false, autoRefresh=false, indicatorText="加载中..."

this.$showLoading();

示例：

2. 带有白色背景

有白色背景的遮罩层

this.$showLoading(true);

示例：

3. 加载超时

网络请求超时，轻触自动刷新。默认实例方法有三个参数，也可以一个都不穿。默认三个参数：isShowMask = true, autoRefresh=true, indicatorText="网络请求超时啦，轻触自动刷新"

this.$showNetTimeout();

示例：

4. 自定义组件

作为组件来使用，其配置见文档中的“配置选项”。

<loading v-model="isShow" :options="{'indicatorText': '列表数据正在加载中，请稍后...'}"></loading>

示例：

5. 隐藏

隐藏加载的实例方法。

this.$hideLoading()

弹窗dom结构

为了了解弹窗dom结构，这里把弹窗的源码贴出来，方便样式定义。

<div class="loading" :class="{'mask': isShowMask, 'show': isShow, 'fadeIn': isShowAnimation, 'fixed': isFixed}" @touchmove.stop.prevent @click.stop.prevent="loadingFadeClick">
    <div class="loading-content">
        <slot>
        <span class="loading-icon progress">
            <svg viewBox="0 0 64 64">
                <g stroke-width="4" stroke-linecap="round">
                    <line y1="17" y2="29" transform="translate(32,32) rotate(180)">
                        <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(210)">
                        <animate attributeName="stroke-opacity" dur="750ms" values="0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(240)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(270)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(300)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(330)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(0)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(30)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(60)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(90)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(120)">
                        <animate attributeName="stroke-opacity" dur="750ms" values=".85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85" repeatCount="indefinite"></animate>
                    </line>
                    <line y1="17" y2="29" transform="translate(32,32) rotate(150)">
                        <animate attributeName="stroke-opacity" dur="750ms" values="1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1" repeatCount="indefinite"></animate>
                    </line>
                </g>
            </svg>
        </span>
        </slot>
        <div class="indicator-text" v-html="indicatorText" v-if="indicatorText"></div>
    </div>
</div>

最后

• 如果喜欢一定要 star哈!!!（谢谢!!）

• 如果有意见和问题 请在 lssues提出，我会在线解答。