npm.io
1.0.7 • Published 1 year ago

bb-loading

Licence
—
Version
1.0.7
Deps
2
Size
83 kB
Vulns
1
Weekly
0
SummaryDependencyVersions

b-loading

很多组件库并不支持指令形式的 loading 加载，所以就有了这个

npm install bb-loading -S

main.js

import BLoading from 'bb-loading'
Vue.use(BLoading)
this.$Bloading.init(config) // config可选参数

// 例

config: {
    type: 0, // 修改图标 0 || 1
    mask: 'rgba(44, 42, 57, 0.3)', // 遮罩层背景色
    color: '#1890ff', // 图标颜色
    text: 'Loading...', // 显示文本
    textColor: '#FFF' // 文本颜色
    iconColor: '#1890ff', // 图标颜色
    iconSize: 24 // 图标大小
}
config 配置参数
配置项 类型 说明 默认值
type number 图标类型，0 或 1
mask string 遮罩层的背景色 'rgba(44, 42, 57, 0.3)'
color string 图标的颜色 '#1890ff'
text string 显示的文本内容 'Loading...'
textColor string 文本的颜色 '#FFF'
iconColor string 图标的颜色 '#1890ff'
iconSize number 图标的大小 24
其他页面使用
  1. 调用模式
this.$Bloading.show() // 显示
this.$Bloading.hide() // 隐藏
  1. 指令模式
<div v-bloading="loading"></div>


export default {
    data() {
        return {
            loading: true
        }
    }
}
更新记录

V0.0.10

  1. 第一版本

V1.0.0

  1. 新增指令模式调用
  2. 新增 loading icon
  3. 新增 config 配置项

V1.0.4

  1. 解决循环中使用指令时只加载最后一个的问题

V1.0.6

  1. 取消控制台一直重复警告

V1.0.7

  1. 修复 - 如果有多个元素绑定指令 避免触发到所有元素
  2. 更新 - 使用 :scope 方式修改获取元素方式

Keywords

loading