vue-simples-loading

vue自定义loading组件，内置三种常用loading（文字、图片、文字加图片混合），提示文字、加载图片、背景颜色、大小、透明度等全可自定义。

Usage

1:安装

npm install vue-simples-loading --save
or
yarn add vue-simples-loading

2:引入

在main.js中或者当前使用的组件内

// 导入组件
import Loading from 'vue-simples-loading'
import 'vue-simples-loading/lib/loading.css'

// 注册组件库
Vue.use(Loading);

3:使用

<Loading />

API

<Loading 
    :show="show" 
    :imgUrl="imgUrl" 
    :size="size" 
    :type="type" 
    :text="text" 
    :color="color"
    :bgColor="bgColor"
    :fontSize="fontSize"
    :opacity="opacity" />

show
[Boolean]
是否显示（非必填，默认：false） true/false

imgUrl
[String]
loading加载图片（必填，请提供【正方形】加载图，仅在type值为'img'或'mix'的时候生效）

size
[String]
loading区域背景尺寸（非必填，默认'45px'，仅在type值为'img'或'mix'的时候生效）
注意：
1：如果配置type为'mix'，size大小建议80px-100px，可根据自己实际需要调整。
2：除了px也可以用使用rem、em等。

type
[String]
加载类型（非必填，默认'text'） text（纯文字）/img（纯图）/mix（混合，文字+图片）

text
[String]
加载文字（非必填，默认'loading...'，仅在type值为'text'或'mix'的时候生效）

color
[String]
加载文字颜色（非必填，默认'#666'，仅在type值为'text'或'mix'的时候生效）

bgColor
[String]
loading区域背景颜色（非必填，默认'#fff'，仅在type值为'img'或'mix'的时候生效）

opacity
[Number]
loading整体背景遮罩层透明度（非必填，默认0.3）取值0-1之间

fontSize
[String]
加载文字大小（非必填，默认14px)

更新记录

===== 2019-07-28 ======
1：修复遮罩层层级
2：新增配置加载文字大小