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() // 隐藏

2. 指令模式

<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 方式修改获取元素方式