zuicool v0.5.4

toc

ZKFrontEnd

项目介绍

最库前端UI组件与辅助函数库

使用方法

全量引入

不推荐使用，即使只使用一个也会加载所有组件和插件，

import {ZCAlert, ZCAlertPlugin} from 'zuicool'

按需引入

推荐使用，减少打包体积

// 组件
import ZCAlert from 'zuicool/dist/components/ZuicoolAlert'
// 插件
import ZCAlertPlugin from 'zuicool/dist/plugins/ZCAlert'

工具函数

import {REGEX_TEL, cutString, ...} from 'zuicool/dist/utils'

微信相关方法

import WX_verify from 'zuicool/dist/utils/wx'
import {WX_verify, WX_configShare, WX_hideAllMenuItem, WX_showMenuItemToShare} from 'zuicool/dist/utils/wx'

组件

ZCAlert

信息弹框组件

props

// 标题文字
title: {
  type: String,
  default: ''
},

// 内容文字
content: {
  type: String,
  default: ''
},

// 按钮文本
labelText: {
  type: String,
  default: '确定'
},

// 显示隐藏控制，可以使用.sync后缀
show: {
  type: Boolean,
  default: false
},

// 弹框位置上偏移距离单位是px，由于浏览器顶部的导航栏
// 导致窗口中心实际位置位于屏幕中心偏下
topOffset: {
  type: Number,
  default: -20
}

event

格式: '事件名'(携带参数) // 事件描述

'hide' // 弹框窗口关闭时触发

'confirm' // 点击弹框按钮时触发，点击后默认关闭弹框

'update:show'(false) // 弹框窗口关闭时触发

methods

hide() // 关闭弹框

ZCConfirm

信息确认组件

props

// 裤兜类型，默认显示笑脸，2显示哭脸
type: {
  type: String,
},

// 标题文字
title: {
  type: String,
  default: ''
},

// 内容文字
content: {
  type: String,
  default: ''
},

// 确定按钮文字
confirmLabel: {
  type: String,
  default: '确定'
},

// 取消按钮文字
cancelLabel: {
  type: String,
  default: '取消'
},

// 显示隐藏控制，可以使用.sync后缀
show: {
  type: Boolean,
  default: false
},

// 窗口位置上偏移
topOffset: {
  type: Number,
  default: -20
}

event

confirm // 点击确定按钮触发，默认关闭弹窗

cancel // 点击取消按钮触发，默认关闭弹窗

hide // 弹窗关闭时触发

update:show (false) // 弹窗关闭时触发

methods

hide() // 关闭弹框

ZCShareMask

分享引导蒙版

props

// 标题文字
title: {
  type: String,
  default: '分享给朋友<br/>一起读好书'
},

// 描述文字
desc: {
  type: String,
},

// 显示隐藏控制
show: {
  type: Boolean,
  'default': false
}

event

update:show (false) // 蒙版关闭时触发

methods

hide() // 关闭蒙版

ZCLoading

加载动画

props

// 显示控制
show: {
  type: Boolean,
},

// 使用微信loading样式
wxLoading: {
  type: Boolean,
},

// 微信loading提示文字
desc: {
  type: String,
},

// 默认为fixed定位，全屏显示
// 为true时使用absolute定位，可以在组件内使用
inner: {
  type: Boolean
},

// 全屏loading时，显示进度数字
progress: {
  type: [Number, String],
},

// 是否隐藏loading动画
hideBounce: {
  type: Boolean,
}

ZCGuideMask

引导流程蒙版，默认fixed覆盖全屏幕

props

// 流程对象序列
frames: {
  type: Array,
  default: []
}

流程对象属性

• onEnter(maskDom, maskVue)

  流程开始回调函数，接受两个参数：

  1. maskDom {dom} 引导蒙版的容器节点
  2. maskVue {vue} 引导蒙版的Vue实例对象

• onBeforeLeave(maskDom, maskVue)

  流程结束回调，参数同上

• window

  透明窗口区域的大小位置属性对象，单位为px。 top，bottom同时出现时，忽略bottom。

  {
    left   {number}  // 左边距
    top    {number}  // 上边距
    width  {number}  // 宽
    height {number}  // 高
    bottom {number}  // 下边距
  }

• desc

  带裤兜的描述文字区域的属性对象。

  {
    content   {string} // 描述文字
    direction {string} // 默认裤兜位于右侧，'left'时位于左侧
    style     {object} // 区域dom节点的样式对象
  }

• btnStyle

  下一步按钮的样式对象

• arrow

  引导箭头的属性对象，箭头的transform节点已经设为箭头起点，箭头方向默认垂直向下

  {
    position {object} // 箭头起点位置对象
    style    {object} // 箭头本身样式对象
  }

AudioPlayer

带播放按钮，交互进度条的音频播放组件，没有样式需要自行添加

props

// 音频资源地址
audioURL: {
  type: String,
  default: ''
}

// 音频logo资源地址
audioHeader: {
  type: String
}

// 是否自动播放
autoPlay: {
  type: Boolean,
  'default': false
}

methods

play() // 播放音频

async pause() // 暂停音频

注意！！

iOS设备无法实现真正的自动播放，需要用户点击屏幕才能播放

WXAudioPlayer

兼容微信音频资源的音频播放，播放微信音频资源需要全局引入wxjssdk

props

// 资源链接地址
URL: {
  type: String
},

// 自动播放
autoPlay: {
  type: Boolean,
  'default': false
},

// 音频时长(秒)，播放微信资源时需要传入
duration: {
  type: Number
},

// 音频logo
audioHeader: {
  default() {
    return {
      URL: '',    // logo资源地址
      loop: false // 是否每次音频播放前都播放音频logo
    }
  }
}

methods

play() // 播放 return {Promise} pause() // 暂停播放 return {Promise} togglePlay() // 切换播放暂停 return {Promise}

CircleProgress

圆形进度条

props

// 组件宽高（px）
size: {
  default: 98
},

// 进度条背景色
bg: {
  default: '#e1e1e1'
},

// 进度条颜色
fill: {
  default: '#07bb58'
},

// 进度条宽度
lineWidth: {
  default: 6
},

// 文字描述
description: {
  type: String
},

// 进度，0-100
progress: {
  default: 0
}

Calendar

打卡日历组件，使用前需要安装vue-awesome-swiper^3.0.1

props

// 日期对象数组
dateList: {
  type: Array,
},

// 选中的日期,YYYY-MM-DD
dateUserSelect: {
  type: String,
}

日期对象

{
  // 日期字符，'YYYY-MM-DD'
  date,
  // 距离今天的日期数
  position,
  // 是否打卡
  tick
}

event

/**
* 日期选择时触发
* {
*   date, {string} 选中的日期字符
*   valid {boolean} 所选日期是否在日期范围内
*   position {number} 所选日期到当前日期的天数
* }
*/
select({date, valid, position})

/**
* 月份切换时触发
* {
*   year {number} 年份
*   month {number} 月份
* }
*/
slideChange({year, month})

Medal

勋章组件

props

// 勋章类别
type: {
  type: string,
  default: 0,
},

// 勋章等级
level: {
  type: [Number, string],
  default: 1,
},

// 勋章名称
title: {
  type: String,
  default: '渐入佳境',
},

// 勋章大小, 组件使用em实现等比缩放
width: {
  type: Number,
  default: 98,
},

// 勋章动画动态静态
stop: {
  type: Boolean,
  default: true,
},

插件

axios

设置了错误处理弹框， 设置了默认接口HOST， 设置post请求的Content-Type为'application/x-www-form-urlencoded;charset=UTF-8'。 可以在所有Vue实例上添加一个方法$request 在request config中，loading为true则会在请求过程中会显示loading动画，否则不显示

import axiosPlugin from 'zuicool/dist/plugins/axios'

// HOST {string}  接口url的host
Vue.use(axiosPlugin, {HOST})

使用方法

https://github.com/axios/axios#axios-api

ZCAlertPlugin

import ZCAlertPlugin from 'zuicool/dist/plugins/ZCAlert'

Vue.use(ZCAlertPlugin)

methods

// 显示弹框
show({
  // {string} 标题文字
  title,
  // {string} 内容文字
  content,
  // {string} 按钮文字
  labelText,
  // {number} 窗口上偏移
  topOffset,
  // {function} 确认按钮点击回调
  onConfirm,
  // {function} 窗口关闭回调
  onHide,
})

// 关闭弹框
hide()

ZCConfirmPlugin

import ZCConfirmPlugin from 'zuicool/dist/plugins/ZCConfirm'

Vue.use(ZCConfirmPlugin)

methods

// 显示窗口
show({
  // {string} 标题文字
  title,
  // {string} 内容文字
  content,
  // {string} 按钮文字
  confirmLabel,
  // {string} 按钮文字
  cancelLabel,
  // {number} 窗口上偏移
  topOffset,
  // {function} 确认按钮点击回调
  onConfirm,
  // {function} 取消按钮点击回调
  onCancel,
  // {function} 窗口关闭回调
  onHide,
})

// 关闭窗口
hide()

ZCToastPlugin

import ZCToastPlugin from 'zuicool/dist/plugins/ZCToast'

Vue.use(ZCToastPlugin)

methods

// 显示弹框
show({
  // {string} toast文字
  content,
  // {number} 持续时长
  duration,
  // {string} ['top', 'middle', 'bottom']分别表示上中下三个位置，默认middle
  position,
})

// 可以只传文字
show(content)

// 隐藏弹框
hide()

ZCGuideMaskPlugin

import ZCGuideMaskPlugin from 'zuicool/dist/plugins/ZCGuideMask'

Vue.use(ZCGuideMaskPlugin)

methods

流程信息对象序列

// 显示
show({
  // {array} 流程信息对象序列
  frames,
})

// 关闭
hide()

ZCShareMaskPlugin

import ZCShareMaskPlugin from 'zuicool/dist/plugins/ZCShareMask'

Vue.use(ZCShareMaskPlugin)

methods

show({
  // {string} 标题文字
  title,
  // {string} 描述文字，暂时不用
  desc,
  // {string} 裤兜图片地址
  kudouImg,
  // {style obj} 裤兜图片样式
  imgStyle,
})

hide()

ZCLoadingPlugin

import ZCLoadingPlugin from 'zuicool/dist/plugins/ZCLoading'

Vue.use(ZCLoadingPlugin)

methods

show({
  // {boolean} 是否使用微信loading样式
  wxLoading,
  // {string} 微信loading文字
  desc,
  // {boolean} 是否使用absolute定位
  inner,
  // {number, string} 进度文字
  progress,
  // {boolean} 是否隐藏loading动画元素
  hideBounce,
})

hide({
  // {boolean} 是否使用渐隐过渡
  fadeOut,
})

工具函数

// 电话号码正则表达式
REGEX_TEL

/**
 * 字符串截断
 * @param str {string}     目标字符串
 * @param length {number}  长度
 * @returns {string}
 */
cutString(str, length)

/**
 * 用户设备平台判断
 * @returns {string} android是安卓，ios是苹果
 */
deviceDetect()

/**
 * 微信环境判断
 * @returns {boolean}
 */
inWeChat()

/**
 * 当前时间到指定时间的时间间隔格式化
 * @param date {string}   日期字符串/毫秒数
 * @returns {string}      ['刚刚', '[x小时]x分钟前', 'x天前']
 */
dateIntervalFormat(date)

/**
 * 页面滚动动画
 * @param position {number} 指定高度
 */
scrollTo(position)

微信相关方法

/**
 * 微信权限认证
 * @param APP_ID {string}   公众号的APP ID
 * @param HOST {string}     接口host
 */
WX_verify(APP_ID, HOST)

/**
 * 设置微信分享
 * @param conf {object}
 * {
 *  title: '', // 分享标题
 *  link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，连接内不能含有特殊字符
 *  imgUrl: '', // 分享图标
 *  success: function () {
 *    // 用户点击分享后执行的回调函数
 *  }
 * }
 */
WX_configShare(conf)

// 隐藏微信菜单的所有分享、收藏和链接复制按钮
WX_hideAllMenuItem()

// 显示微信菜单的分享、收藏按钮
WX_showMenuItemToShare()

开发

yarn dev

会运行一个测试页面，包含所有的组件，工具函数还没有测试用例（待完善）

打包

yarn build

完成后运行publish, 需要npm账号。

!!!运行前请确保npm config 中的registry是npmjs.org

npm publish

MedalPopupPlugin

import MedalPopupPlugin from 'zuicool/dist/plugins/MedalPopup'

Vue.use(MedalPopupPlugin)

methods

// 显示勋章弹框
show({
  // {string} 勋章类别,前后端协定值为组件名称
  type,
  // {string, number} 勋章等级
  level,
  // {string} 勋章标题
  title,
  // {string} encodeURIComponent编码后的用户头像地址
  userPortrait,
  // {function} 窗口关闭回调
  onHide,
})

// 关闭勋章弹框
hide()