touchealth-ui
v0.5.5
Published
基于 vue 的UI组件库,势成科技内部使用
Downloads
13
Readme
touchealth-ui
项目说明
本项目是势成科技前端内部使用的ui组件库 已使用postcss插件转换样式px单位为vw,自适应移动端
项目结构
[examples]文件夹为本地测试文件夹,可引入编写的组件,进行开发调试 [packages]文件夹为ui组件文件夹,每个组件单独一个文件夹 [src]文件夹包含一些公用文件,包括图片,公用方法等 [lib]为打包后的组件包
打包发布npm包流程
- 打包为npm包
npm run lib
- 发布npm包
登录(未登录需登录验证npm账号)
npm login
更新版本号(xx.xx.xx)
npm version patch
修改版本号最后一位,表示一些补丁和修复
npm version minor
修改版本号第二位,表示一个小版本的更新
npm version major
修改版本号第一位,表示一个大版本的更新
- 发布
npm publish
外部使用npm包步骤
npm install touchealth-ui -S
在main.js文件中引入
import TouchealthUI from "touchealth-ui" import "touchealth-ui/lib/touchealth-ui.css" // 全局注册组件,暂不支持按需引入 Vue.use(TouchealthUI)
注意问题
如果运行项目出现一系列
core-js
依赖错误,输入下面命令进行依赖的安装。npm install --save core-js@2
包含组件
分享组件
组件说明
该组件是用于各大移动浏览器分享,根据浏览器种类共有三种表现:
微信浏览器
微信浏览器弹出蒙层,指示用户点击右上角微信自带分享功能。该功能需要调用微信的分享接口,需要后端配合传入一些接口调用参数。
支付宝浏览器
支付宝浏览器弹出「复制链接」页面,点击复制当前页面URL
其他浏览器
其他浏览器若能唤醒自带的分享组件,即通过浏览器自身分享组件进行分享。若不能唤醒,则表现和支付宝浏览器分享一样,弹出「复制链接」页面。
使用方法
<to-share :shareConf="shareConf" :wxApiConf="wxApiConf"> <img slot="icon" class="icon" src=""/> <div slot="text" class="text">分享</div> </to-share>
参数
shareConf
shareConf
参数是分享的配置参数对象,包括imgUrl
、title
、desc
、from
、link
。imgUrl
分享文案中的右侧图片
title
分享文案中的标题
desc
分享文案中的描述
from
分享文案中的来源
link
分享文案中的点击链接URL
wxApiConf
wxApiConf
参数是微信浏览器内分享的接口调用参数对象,包括appId
、timestamp
、nonceStr
和signature
。插槽
该分享组件中的分享按钮icon及文案,均以插槽的形式开放到外部,相关样式也由外部进行定义。
优惠券组件
组件说明
该组件是用于不同页面中关于优惠券的部分。由于不同页面优惠券内容,大体相似,但存在不同的细节,故组件通过
type
属性区分使用场景从而做一些组件内部结构调整。此外,对于优惠券单个对象中的couponStatus
字段值在此做一个统一定义与说明。couponStatus
表示优惠券的状态,0表示可领取,1表示已领取,2表示去使用,3表示不可用,4表示已使用,5表示未选择,6表示已选择。使用方法
<to-coupon :couponList="couponList" :type="4" @getCoupon="getCoupon" @useCoupon="useCoupon" @chooseCoupon="chooseCoupon"></to-coupon>
参数
couponList(优惠券列表)
couponList
属性是优惠券列表,外部获取数据后,直接通过这个属性传入数据。注意,在这一步之前需要对优惠券列表遍历,处理好每张优惠券的状态值couponStatus
。type 场景值
type
是场景值,值为1,2,3,4。由于优惠券组件用于多个页面,为了做到通用性,通过type
属性进行不同页面细节的调整。以下为具体场景:
type=1
「医院详情」、「套餐详情」页面领取优惠券,右侧按钮文本为领取和已领取。
type=2
「我的优惠券」页面展示优惠券,右侧按钮文本为去使用
type=3
「领券中心」页面展示优惠券,右侧按钮文本为领取和去使用,并且点击领取后优惠券背景图片改变。
type=4
「选择优惠券」页面展示已领取的优惠券,右侧内容变为icon,并根据优惠券不同状态展示不同icon。
getCoupon 优惠券领取事件
组件传到父组件的事件之一,在type=1和type=3场景中,点击领取按钮,触发
getCoupon
事件,传出两个参数couponId
和index
,其中couponId
是优惠券id,index
是该优惠券在优惠券列表中的索引。领取优惠券,需要调用后台接口,在领取成功后需要在外部手动改动该优惠券的状态couponStatus
为2。useCoupon 优惠券使用事件
组件传到父组件的事件之一,在type=1和type=3场景中,点击去使用按钮,触发
useCoupon
事件,传出一个参数couponId
,couponId
是优惠券Id。chooseCoupon 优惠券选择事件
组件传到父组件的事件之一,在type=4场景中,点击未选择的优惠券icon,选中该优惠券。传出一个参数
couponId
,couponId
是优惠券Id。
问答组件
组件说明
该组件是用于「医院详情」和「套餐详情」页面的问答模块。通过传入
type
属性,确定组件使用场景。该组件已经内部包含问答为空的缺省内容。使用方法
<to-qa :qaList="list" :type="2" :total='total' @seeMore='seeMore' @putQuestion='putQuestion'></to-qa>
参数
qaList(问答列表)
qaList
是问大家列表,包含当前医院/套餐下的所有问答列表。type 场景值
type
是场景值,表明组件使用的场景。以下为具体值:
type=1
「医院详情」页面
type=2
「套餐详情」页面
seeMore 查看全部事件
组件传到父组件的事件之一,在type=1和type=2场景中,点击问答列表模块查看全部的问答,此处可以添加跳转逻辑。
putQuestion 去提问事件
组件传到父组件的事件之一,在type=1和type=2场景中,如果问答列表为空,点击「我要提问」按钮前往提问页面。
左滑+长按组件
组件说明
该组件是用于「我的收藏」页面的列表,支持左滑操作和长按操作
使用方法
<left-slide :item="item" :index="index" :id="id" @longTapEvent="longTapEvent"> <template slot="info" slot-scope="props"> </template> <template slot="action" slot-scope="props"> </template> </left-slide>
参数
item(列表单条内容)
item
是列表单条数据index (列表单条数据下标)
index
是列表单条数据下标id (列表唯一标识)
id
是列表唯一标识,常用idlongTapEvent (长按事件)
longTapEvent
是自定义长按事件info (列表内容插槽)
用于列表展示内容
action (左滑以后操作插槽)
用于组件左滑以后展示的内容
评论组件
组件说明 组件为评论空间,作为评论详情的入口
使用方法
<user-comment :list="list" :records="records"></user-comment>
参数
list(评论列表)
list
包含如下字段- userId: "11", //用户id
- userName: "用户昵称", //用户昵称
- star: 2, //评价分数
- reviewDate: "2019-10-01", //评价时间
- reviewContent: "11111111", //评价内容
- userFaceLink:"https://fg" //用户头像
- records(评论总数量)
倒计时组件
组件说明 组件作为秒杀倒计时控件
使用方法
<count-down :price="price" :linePrice="linePrice" :endTime="endTime"></count-down>
参数
price
(商品价格)linePrice
(划线价格)endTime
(倒计时结束时间,输入格式 eg. 2019/12/10 00:00:00)
返回顶部组件
组件说明 移动端返回顶部,支持自定义元素和样式,兼容默认window滚动、指定元素滚动($ref)、在父组件监听滚动(兼容cube-ui无法添加滚动事件)
使用方法
<scroll-to-top v-if="scroll" :scrollEle="scroll" :scrollTopValue="scrollTopValue" :distance="1" :styleObj="styleObj"></scroll-to-top>
参数
distance
(显示icon的超出距离)styleObj
(自定义样式)scrollTopValue
(滚动监听超出高度。此属性是兼容cube-ui scroll组件无法原生添加scroll事件,所以在父组件监听滚动传给该组件)scrollEle
(要监听滚动的元素,在父组件使用$ref获取该元素传给该组件)