vue-simples-loading

vue loading组件

Usage no npm install needed!

<script type="module">
  import vueSimplesLoading from 'https://cdn.skypack.dev/vue-simples-loading';
</script>

README

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:新增配置加载文字大小