移动端组件库pl-ui

最近公司迭代app的改版，由于业务的需求的拓展，封装部分组件，正好可以整合一下，于是就有了下面的一些组件，包括：Toast，Steps，Collapse，Cell，Svg-icon，placeholder，文档需要慢慢更新...

效果展示

1. Toast组件

基本用法

Toast('提示文案');
Toast({
  type: 'loading',
  message: '加载中...'
});
Toast.success('成功文案');
Toast.fail('失败文案');
复制代码

方法

方法名	参数	返回值	介绍
Toast	options/message	toast 实例	展示提示
Toast.loading	options/message	toast 实例	展示加载提示
Toast.success	options/message	toast 实例	展示成功提示
Toast.fail	options/message	toast 实例	展示失败提示
Toast.close	close: Boolean	Void	关闭提示

Options

参数	说明	类型	默认值
type	提示类型，可选值为loading success fail close normal colorful html	String	text
position	位置，可选值为 top bottom	String	middle
duration	展示时长(ms)	Number	3000
mask	是否显示背景遮罩层	Boolean	true
transition	提示开场动画，可选值为slide-down slide-up slide-left slide-right	String	fade
bgContent	提示内容的背景颜色，可选值为white transparent	String	black
background	遮盖层的背景，支持十六进制和rgb格式	String	rgba(0, 0, 0, 0.3)
colorText	色彩文案，只限于type为colorful使用	String	-
color	色彩文案颜色，只限于type为colorful使用	String	#F89516
title	标题，只限于type为normal使用	String	-
icon	加载的图标，只支持svg	String	loading
size	加载的图标大小	Number	48
isClose	主动关闭加载提示	Boolean	false
animation	是否开启加载的动画，只限于type为loading	Boolean	false
animationName	开启加载的动画名，只限于type为loading	String	-

2. Step组件

基本用法

<pl-step :active="active" active-text-color="#313131">
    <pl-steps>预约成功</pl-steps>
    <pl-steps>预约专家</pl-steps>
    <pl-steps>正在服务</pl-steps>
    <pl-steps>完成服务</pl-steps>
</pl-step>
<van-button type="default" @click="handleNext">下一步</van-button>
复制代码

API

参数	说明	类型	默认值
active	当前步骤	Number	0
active-svg	自定义激活状态底部图标，详见svg组件	String	checked
dot-svg	自定义未激活状态底部图标，详见svg组件	String	dot-circle
active-text-color	自定义激活状态颜色	String	#268AED
active-line-color	自定义激活线束颜色	String	#268AED

3. Svg-icon组件

基本用法

<pl-svg-icon icon="done" />
<pl-svg-icon icon="success" size="48" />
<pl-svg-icon icon="v_loading" size="32" animation animation-name="v-loading" />
复制代码

API

参数	说明	类型	默认值
icon	svg地址	String	-
size	图标大小，如 20px 2em，默认单位为px	String	188
animation	是否开启动画	Boolean	false
animation-name	是否开启动画名	String	-

4. collapse组件

基本用法

<pl-collapse :value="value" />
<pl-collapse :value="value" type="character" align="left" />
<pl-collapse :value="value" align="right" type="character" unfold-text="详细" fold-text="挂起" />
复制代码

API

参数	说明	类型	默认值
value	展开的内容	String	-
type	展开方式, 可选值character	String	arrow
align	展开动作的位置left right	String	center
unfold-text	展开描述文字	String	展开
fold-text	折叠描述文字	String	收起

未完待续

gayHub地址：vue-mobile-ui