@gdyfe/gdy-component-lib

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