gdy-component-lib

Introduction

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

Setup

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

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

import

全局引入

// main.js

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

Vue.use(GdyComponentLib)

局部引入

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： 接口发送数据，及接口返回数据（在请求成功后触发） |