# ZKFontEnd

**Repository Path**: zuicooltimer/ZKFontEnd

## Basic Information

- **Project Name**: ZKFontEnd
- **Description**: 最库前端UI组件与辅助函数库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-06-25
- **Last Updated**: 2022-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ZKFontEnd
[TOC]
## 项目介绍
最库前端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
信息弹框组件
#### pros
```
// 标题文字
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
```javascript
/**
* 日期选择时触发
* {
*   date, {string} 选中的日期字符
*   valid {boolean} 所选日期是否在日期范围内
*   position {number} 所选日期到当前日期的天数 
* }
*/
select({date, valid, position})

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

## 插件
### 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
```javascript
import ZCAlertPlugin from 'zuicool/dist/plugins/ZCAlert'

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

// 关闭弹框
hide()
```

### ZCConfirmPlugin
```javascript
import ZCConfirmPlugin from 'zuicool/dist/plugins/ZCConfirm'

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

// 关闭窗口
hide()
```

### ZCToastPlugin
```javascript
import ZCToastPlugin from 'zuicool/dist/plugins/ZCToast'

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

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

// 隐藏弹框
hide()
```

### ZCGuideMaskPlugin
```javascript
import ZCGuideMaskPlugin from 'zuicool/dist/plugins/ZCGuideMask'

Vue.use(ZCGuideMaskPlugin)
```
#### methods
[流程信息对象序列](#zcguidemask)
```javascript
// 显示
show({
  // {array} 流程信息对象序列
  frames,
})

// 关闭
hide()
```

### ZCShareMaskPlugin
```javascript
import ZCShareMaskPlugin from 'zuicool/dist/plugins/ZCShareMask'

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

hide()
```

### ZCLoadingPlugin
```javascript
import ZCLoadingPlugin from 'zuicool/dist/plugins/ZCLoading'

Vue.use(ZCLoadingPlugin)
```
#### methods
```javascript
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()
```