## lbw-ui
一切技术为了业务与产品，为了适应本公司业务项目的需求，对组件进行统一封装，形成开源插件。

注：本插件针对本公司项目适配性较全面，并未对大多项目做兼容。


基于Vue3+ant-design-vue的pc端插件。

#### 插件的安装
```js
npm i lbw-ui
// or
yarn add lbw-ui

```

#### 引入插件
```js
import Vue from 'vue';
import LBWUI from 'lbw-ui';

const app = createApp(App);
app.use(LBWUI);
// 组件使用
待定

```
#### 基本用法  
```html
<button :text="text"
></button>
```

### API
| 参数 | 说明 | 类型 | 默认值 |
| - | :- | :- | :-: |
| v-model | 密码框的显示隐藏 | Boolean | false |
| digit | 密码的位数| Number | 6 |
| ref | 获取当前插件实例 | String | - |
| title | 弹窗标题 | String | 请输入支付密码 |
| loading-text | 正在支付的文字提示 | String | 正在支付 |
| finished-text | 支付成功的文字提示 | String | 支付成功 |
| duration | 支付成功提示的显示时间 | Number | 500 |

### Events

| 事件名 | 说明 | 参数 |
| :- | :- | :- |
| input-end | 密码输入完成后的回调函数 | 用户输入的密码 |
| close | 密码弹窗关闭后的回调函数 | - |
| forget | 点击忘记密码的回调函数 | - |

### 实例方法

| 方法名 | 说明 | 参数 |
| :- | :- | :- |
| $success | 通知插件支付结果成功，该方法返回`promise`，可在`then`中进行成功后的回调函数 | - |
| $fail| 密码弹窗关闭后的回调函数 | - |




### API  
| 参数 | 说明 | 类型 | 默认值 |  
| - | :- | :- | :-: |  
| v-model | 密码框的显示隐藏 | Boolean | false | 
| digit | 密码的位数| Number | 6 |
| ref | 获取当前插件实例 | String | - |
| title | 弹窗标题 | String | 请输入支付密码 |
| loading-text | 正在支付的文字提示 | String | 正在支付 |
| finished-text | 支付成功的文字提示 | String | 支付成功 |
| duration | 支付成功提示的显示时间 | Number | 500 |


### Event    

| 事件名 | 说明 | 参数 |  
| :- | :- | :- |
| input-end | 密码输入完成后的回调函数 | - |
| close | 密码弹窗关闭后的回调函数 | - |
| forget | 点击忘记密码的回调函数 | - |

### input-end 回调参数
| 参数名 | 说明 | 类型 |
| - | :- | :- |
| val | 支付密码 | String |

### 插件内部方法  
| 方法名 | 说明 | 参数 |  
| :- | :- | :- |
| $success | 通知插件支付结果成功，该方法返回promise，可在.then()方法中进行成功后的回调函数 | - |
| $fail| 密码弹窗关闭后的回调函数 | - |  

#### 用法示例：  
支付结果成功：  
```javascript
this.$refs.pays.$success(true).then(res => {
    console.log('支付成功')
    this.$router.push('/success')
})
```
支付结果失败：  
```javascript  
this.$refs.pays.$fail('可以自定义错误提示，默认：支付密码错误')  
```  

## Build Setup

``` bash
# install dependencies
yarn

# serve with hot reload at localhost:8080
yarn serve

```