npm package: @21cnfe/vui
Description: 基于 Ant Design 和 Vue 的移动端UI组件库。
Author: 21cnfe
Latest version: 1.7.5

# vui 使用必读

## Changelog

### 版本

### v1.7.5

1. feat: `PullToRefresh` 支持单独配置刷新方向，刷新动画显示时机优化
2. feat: `Textarea` 支持高度自适应
3. feat: `RadioGroup` 支持单个单选框点击事件监听导出
4. fix: `VideoPlayer` 视频播放器组件接入方法法调整
5. fix: `ActionSheet` 内添加 `Cascader` 组件导致的滑动穿透问题修复

#### v1.7.4

1. feat: `Uploader` 新增文件上传组件
2. feat: `ImageUploader` 新增图片上传组件
3. feat: `NumberKeyboard` 新增数字键盘组件
4. feat: `Countdown` 新增倒计时组件
5. feat: `Icon` 内置图标更新
6. feat: `CalenderPicker` 修复滚动到最低部被遮挡问题，支持修改主题色
7. feat: `Popover` `Result` 组件更新优化
8. feat: `PickerView` 新增多列参数、可视参数数目配置
9. feat: `VideoPlayer` 对接自研播放器 `2.0.0` 版本
10. feat: `LivePlayer` 对接自研播放器 `2.0.0` 版本
11. fix: `Switch` 开关组件修复选中事件无法监听问题
12. fix: `Previewer` 图片预览组件修复再次加载组件时历史容器没有清除问题

#### v1.7.3

1. feat: 新增 `Divider` 分割线组件，支持文字、虚线、渐变、自定义颜色
2. feat: 新增 `Indexlist` 索引列表组件
3. feat: `Icon` 新增一系列内置图标
4. feat: `Rate` 支持更换图标、颜色
5. feat: `Toast`  支持自定义展示位置和自定义图标
6. feat: `Tag` 新增4种状态类型、新增圆形和标签类型样式
7. feat: `Button` 新增4种状态类型
8. perf: `Progress` 环形进度条支持设置透明背景
9. perf: 其他问题修复、全局示例更新、示例样式风格统一

#### v1.7.2

1. feat: 新增多选组 `Checkbox-group` 功能组件
2. feat: 图片预览组件增加点击监听、关闭预览操作；修复初始化样式错误问题
3. perf: `Pickers`、`Carousel`、`Actionsheet` 等组件示例更新，样式优化
4. fix: 修复下拉刷新组件当没填满高度时样式混乱、刷新后还有提示语暴露在外面问题
5. fix: 修复部分组件按需加载引入方式报错问题

#### v1.7.1

1. feat: 新增 `Cascader` 多级地址级联选择器组件
2. feat: 新增 `Sticky` 粘性布局组件
3. feat: 新增 `VideoPlayer` 视频播放器组件
4. feat: 新增 `LivePlayer` 直播播放器组件
5. feat: `Picker` 省份选择器支持省份-城市格式选择
6. feat: `Checkbox` 组件支持点击事件外部监听
7. perf: `NoticeBar` 通知组件默认样式与全局主题统一
8. perf: `Carousel` 走马灯组件默认样式与全局主题统一
9. perf: `Drawer` 抽屉组件默认样式与全局主题统一
10. perf: 删除一些外部链接、全局图片体积优化

#### v1.7.0

1. feat: 新增 `Nav` 导航菜单组件，支持水平布局和垂直布局
2. feat: `ActionSheet` 组件新增自定义slot功能
3. feat: `Tabs` 组件新增折叠菜单模式，增加tabs折叠菜单模式示例
4. feat: `Card` 组件支持垂直布局、水平布局和slot、新增fluent风格样式
5. feat: `Grid` 组件内容支持垂直布局和水平布局
6. feat: `Progress` 组件新增自定义slot功能
7. feat: `SearchBar` 组件新增自定义slot功能、默认样式优化
8. feat: `Switch` 组件新增fluent风格样式
9. feat: `DataPicker` 组件类型新增period时间段选择器
10. fix: `Calendar` 日期选择组件修复连续多选高亮区域显示错误问题

#### v1.6.0

1. feat: 新增面包屑路径组件
2. feat: `ActionSheet` 组件新增confirm类型，新增fluent风格样式
3. feat: `Modal` 组件支持取消加载过渡动画
4. feat: 新增农历日期选择器示例
5. fix: 修复 `Button` 组件连续点击或长按时内部文字被选中出现复制操作的问题
6. fix: 修复 `Badge` 组件当内容长度为1时不是正圆问题、修复当badge内数字长度大于1时tabs内容被遮挡问题

#### v1.5.0

1. feat: 组件库支持使用时按需引入
2. feat: `Drawer` 抽屉组件onHide事件
3. fix: `Switch` 组件切换无效

#### v1.4.0

1. feat: `Date-picker` 组件增加农历选择功能
2. feat: `Drawer` 抽屉组件
3. feat: 无限加载组件
4. fix: 图片预览、下拉刷新、输入框功能更新
5. fix: 修复输入框clear按钮点击区域过小的问题
6. feat: 新增骨架屏组件
7. feat: 新增 `Empty` 空状态组件

#### v1.3.0

1. feat: 新增 `Rate` 评分组件
2. fix: 修复 `Tabs` 组件面板滑动问题
3. fix: 优化轮播点击事件
4. feat: 扩展 `Datepicker` 组件自定义年月格式
5. fix: 修复 `Toast` 因动画过渡效果导致的体验问题
6. fix: 修复 `PullToRefresh` 组件触发刷新机制问题

#### v1.2.3

1. pref: 优化内部子组件注册方式

#### v1.2.2

1. feat: 新增指令加载组件 `Loading`
1. feat: `Tabs` 组件新增面板滑动
1. fix: 优化 `Toast`、`Message`、`Modal` 组件销毁机制

#### v1.2.1

1. fix: 优化 `Pikcer` 组件用法
2. fix: 优化 `Datepicker` 组件用法
3. fix: 修复 `Toast` 组件位置样式问题

#### v1.2.0

1. feat: 更新 `Popover` 组件位置属性
2. fix: 修复 `PopoverItem` 因flex弹性布局造成的中文强制换行问题
3. feat: `Previewer` 预览组件支持不循环图片展示
4. feat: 新增 `SwipeAction` 滑动操作组件
5. feat: 优化 `ActionSheet` 组件分享模式
6. feat: 简化 `CalendarPikcer` 的使用方式
7. feat: `Accordion` 折叠面板组件优化使用方式, 初始化打开面板采用数组传值打开多面板
8. fix: 修复 `Slider` 组件滑动时值不正确的问题
9. feat: `Accordion` 组件新增onPanelClick事件
10. fix: 修复 `Popover` 组件点击穿透问题, 统一组件注册方式

#### `🚩` BREAKING CHANGES

> **v1.2.0** 版本对组件名前缀进行统一，原 `am` 前缀组件更改为 `ok` 前缀。组件库内部 `class` 类名由 `am-` 前缀调整为 `ok-`。若在旧项目中对组件样式做过调整，在使用新版本组件时，注意要更改对应使用组件的前缀名为 `ok-`。

#### v1.1.1

1. fix: 修复popover组件点击穿透问题, 统一组件注册方式

#### v1.1.0

1. feat: 新增VUI less样式引入方式，更好的支持主题定制功能
2. feat: 新增Previewer图片预览组件, 优化ios加载图片白框兼容问题，图片缓存问题
3. feat: 新增Calendar日历组件,支持周日最前最后显示，支持农历、节气显示
4. feat: 新增PullToRefresh拉动刷新组件
5. feat: 新增Message全局提示组件
6. feat: 新增Modal对话框组件全局调用方式
7. feat: 新增Toast组件append2dom属性以及单加载提示
8. feat: 新增Carousel组件间距属性，支持多轮播项同页展示
9. fix: 修复Progress进度条组件条形自定义样式问题
10. feat: 新增Grid宫格组件
11. feat: 新增TabBar组件路由模式
12. feat: 新增calendarPicker组件

#### v1.0.1

1. feat: 增加jest测试
2. fix: carousel走马灯动画轮播，新增自动播放属性
3. fix: 修复tabBar selected选中，switch初始化，textarea样式
4. fix: 修复SearchBar autofocus功能，badge数字0显示
5. fix: 修复list item多行显示时箭头bug
6. feat: toast添加手动关闭功能
7. fix: 修复stepper input输入以及最小值限制bug
8. fix: 修复selectList组件check样式

#### v1.0.0

1. feat: 新增环形进度条
2. feat: imagePicker添加删除图片事件
3. fix: 修复button、carousel、imagepIcker样式
4. feat: pickerView选择器、修复picker-column根据传入列数展示高度
5. fix: 修复radio组件disabled状态
6. fix: 修复accordion组件设置初始打开面板
7. fix: 修复noticebar以及tag组件
8. feat: tabs组件增加滑动标签功能

#### v0.9.16

1. fix: list组件箭头问题

#### v0.9.15

1. fix: tabsList 组件tabs name过长显示
2. fix: 修复steppers组件在ios端readonly会调用键盘的bug
3. fix: stepper组件输入状态失焦默认值，非数字字符过滤

#### v0.9.14

1. fix: 优化textarea组件，支持计数功能
2. feat: result结果页组件
3. fix: stepper双向绑定，tabs组件支持dot状态
4. feat: stepper组件增加自定义图标属性
5. feat: input组件支持内容左对齐

#### v0.9.13

1. fix: stepper双向绑定，tabs组件支持dot状态
2. fix: input\textarea数据双向绑定

#### v0.9.12

1. fix: 修复input和textarea组件清除按钮不能清除掉value问题，修复input组件type:number无法限制输入长度
2. fix: 修复switch value数据绑定问题
3. fix: 修复steps finish和progress状态

#### v0.9.11

1. fix: actionsheet组件事件数据改为对象{item, index}

#### v0.9.10

1. fix: steps组件属性校验

#### v0.9.9

1. fix: list组件与下拉刷新冲突
2. refactor: 调整actionsheet组件动画函数
3. feat: steps进度组件添加node类型模式，switch组件添加morden类型样式
4. feat: checkbox支持双向绑定
5. fix: searchbar组件初始化宽度显示问题

#### v0.9.8

1. feat: 添加actionsheet 图标文字模式

### 组件库使用

1. 项目脚手架目录运行 `npm i @21cnfe/vui`
2. 项目主入口 main.js引入组件库

**全量引入方式**：

```bash
import Vui from '@21cnfe/vui'
import '@21cnfe/vui/styles/antd-mobile.css'
Vue.use(Vui)
```

**按需引入方式**：

安装 `babel-plugin-component`

```bash
npm i babel-plugin-component
```

在 `babel.config.js` 中加入以下代码：

```js
plugins: [[
  // 配置按需引入插件babel-plugin-component
  "component",
  {
    // 库的名字
    "libraryName": ""@21cnfe/vui",
    // 存放库文件的文件夹
    "libDir": "dist/lib/components",
  }
]]
```

最后按照如下方式引入，插件会自动帮你转换路径

`-1、全局注册`

```js
import { Actionsheet } from '@21cnfe/vui'
Vue.component('actionsheet', Actionsheet)
```

`-2、局部注册`

```js
import { Actionsheet } from '@21cnfe/vui'
export default {
components: {
    Actionsheet
  }
}
```