# bb-loading

> 一个适用于Vue2的loading加载动画

Latest version **1.0.7** (published 2025-03-27) · 0 weekly downloads

## Install

```sh
npm install bb-loading
pnpm add bb-loading
yarn add bb-loading
bun add bb-loading
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2025-03-27 |
| First published | 2022-08-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 83.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | bulingbuling1314 |
| Keywords | loading |

## Links

- npm: https://www.npmjs.com/package/bb-loading
- npm.io page: https://npm.io/package/bb-loading

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Recent versions

- 1.0.7 (latest) — 2025-03-27
- 1.0.6 — 2025-03-27
- 1.0.5 — 2022-09-15
- 1.0.4 — 2022-09-14
- 1.0.3 — 2022-09-14
- 1.0.2 — 2022-09-14
- 1.0.1 — 2022-09-14
- 1.0.0 — 2022-09-14
- 0.0.10 — 2022-08-06
- 0.0.9 — 2022-08-06
- 0.0.8 — 2022-08-06
- 0.0.7 — 2022-08-06
- 0.0.6 — 2022-08-06
- 0.0.5 — 2022-08-06
- 0.0.4 — 2022-08-06
- … 3 more at https://npm.io/package/bb-loading/versions

## README

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

---
_Source: https://npm.io/package/bb-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._