npm package: @gdyfe/gdy-component-lib
Description: 广电云C端业务组件库
Author: Levlin
Latest version: 1.0.4

# gdy-component-lib

## Introduction

> 广电云C端业务组件库，目前含有地址选择器弹窗，基础组件基于vant-ui

### Setup

```bash
yarn add @gdyfe/gdy-component-lib -S
```

```bash
npm install @gdyfe/gdy-component-lib -S
```

### import

全局引入

```vue
// main.js

import Vue from 'vue'
import GdyComponentLib from '@gdyfe/gdy-component-lib'
import '@gdyfe/gdy-component-lib/lib/index.css'

Vue.use(GdyComponentLib)
```

局部引入

```vue
demo.vue

<template>
	<!-- 在这里只是作为例子展示，实际使用过程必传参数不止这些 -->
	<AddressListPopup v-model="isShow"></AddressListPopup>
</template>

<script>
import { AddressListPopup } from '@gdyfe/gdy-component-lib'
import '@gdyfe/gdy-component-lib/lib/index.css'

export default {
  name: 'demo',
  data(){
    return {
      isShow: true
    }
  },
  components: {
    AddressListPopup
  }
}
</script>
```

### API

#### AddressListPopup（地址列表弹窗）

##### Props

| 参数        | 说明                          | 类型             | 默认值     |
| ----------- | ----------------------------- | ---------------- | ---------- |
| v-model     | 控制窗口显隐（必填）          | boolean          | false      |
| uin         | Uin（必填）                   | number \| string | null       |
| title       | 窗口标题                      | string           | "选择地址" |
| checkable   | 开启选中模式，可选择某个地址  | boolean          | true       |
| leftArrow   | 是否显示左侧返回按钮          | boolean          | false      |
| leftText    | 左侧显示文字                  | string           | ""         |
| defaultId   | 默认选中地址的id              | number           | null       |
| createApi   | 创建地址的api函数（必填）     | function         | null       |
| updateApi   | 更新地址的api函数（必填）     | function         | null       |
| retrieveApi | 获取地址列表的api函数（必填） | function         | null       |
| deleteApi   | 删除地址的api函数（必填）     | function         | null       |

##### Event

| 事件名        | 说明                                                             | 回调参数                      |
| ------------- | ---------------------------------------------------------------- | ----------------------------- |
| onSave        | 当checkable为true且leftText、leftArrow均为非真值，弹窗关闭时触发 | value:所选中地址的对象或null  |
| onBackHandler | 当leftArrow或leftText为true时，点击左侧返回按钮或文字时触发      | value: 所选中地址的对象或null |
| onClose       | 当弹窗关闭时触发                                                 | -                             |

#### AddressEditPopup（地址编辑弹窗）

##### Props

| 参数    | 说明                                                                       | 类型    | 默认值 |
| ------- | -------------------------------------------------------------------------- | ------- | ------ |
| v-model | 控制窗口显隐（必填）                                                       | boolean | false  |
| info    | 所编辑地址的对象，对象中name，mobile，city，province，area，detail是必须的 | object  | {}     |

##### Event

| 事件名        | 说明                         | 回调参数                                    |
| ------------- | ---------------------------- | ------------------------------------------- |
| onBackHandler | 当点击标题左侧返回按钮时触发 | -                                           |
| onConfirm     | 当点击标题右侧保存按钮时触发 | value：传入的info和表单当前最新值的并集对象 |

#### AreaPicker（地区选取弹窗）

##### Props

| 参数    | 说明                 | 类型    | 默认值 |
| ------- | -------------------- | ------- | ------ |
| v-model | 控制窗口显隐（必填） | boolean | false  |
| info    | 暂未使用             | object  | {}     |

##### Event

| 事件名    | 说明                     | 回调参数                            |
| --------- | ------------------------ | ----------------------------------- |
| onCancel  | 当点击左侧取消按钮时触发 | -                                   |
| onConfirm | 当点击右侧确定按钮时触发 | value：选取省、城市、县区的对象数组 |

#### SendRedPackPopup（红包发送弹窗）

##### Props

| 参数           | 说明                            | 类型     | 默认值               |
| -------------- | ------------------------------- | -------- | -------------------- |
| v-model        | 控制窗口显隐（必填）            | boolean  | false                |
| info           | 改变表单数据（暂未使用）        | object   | {}                   |
| getBlessingApi | 获取祝福语列表的api函数（必填） | function | null                 |
| sendRedPackApi | 发送红包的api函数（必填）       | function | null                 |
| channelId      | 直播间id（必填）                | number   | 0                    |
| uin            | Uin（必填）                     | number   | 0                    |
| backUrl        | 支付完成返回的地址（必填）      | string   | window.location.href |
| customerDomain | 转跳支付的域（必填）            | string   | web.guangdianyun.tv  |

##### Event

| 事件名    | 说明                       | 回调参数                                                 |
| --------- | -------------------------- | -------------------------------------------------------- |
| onConfirm | 当点击“发送红包”按钮时触发 | value： 接口发送数据，及接口返回数据（在请求成功后触发） |