@21cnfe/vui
v1.7.5
Published
基于 Ant Design 和 Vue 的移动端UI组件库。
Downloads
35
Readme
vui 使用必读
Changelog
版本
v1.7.5
- feat:
PullToRefresh
支持单独配置刷新方向,刷新动画显示时机优化 - feat:
Textarea
支持高度自适应 - feat:
RadioGroup
支持单个单选框点击事件监听导出 - fix:
VideoPlayer
视频播放器组件接入方法法调整 - fix:
ActionSheet
内添加Cascader
组件导致的滑动穿透问题修复
v1.7.4
- feat:
Uploader
新增文件上传组件 - feat:
ImageUploader
新增图片上传组件 - feat:
NumberKeyboard
新增数字键盘组件 - feat:
Countdown
新增倒计时组件 - feat:
Icon
内置图标更新 - feat:
CalenderPicker
修复滚动到最低部被遮挡问题,支持修改主题色 - feat:
Popover
Result
组件更新优化 - feat:
PickerView
新增多列参数、可视参数数目配置 - feat:
VideoPlayer
对接自研播放器2.0.0
版本 - feat:
LivePlayer
对接自研播放器2.0.0
版本 - fix:
Switch
开关组件修复选中事件无法监听问题 - fix:
Previewer
图片预览组件修复再次加载组件时历史容器没有清除问题
v1.7.3
- feat: 新增
Divider
分割线组件,支持文字、虚线、渐变、自定义颜色 - feat: 新增
Indexlist
索引列表组件 - feat:
Icon
新增一系列内置图标 - feat:
Rate
支持更换图标、颜色 - feat:
Toast
支持自定义展示位置和自定义图标 - feat:
Tag
新增4种状态类型、新增圆形和标签类型样式 - feat:
Button
新增4种状态类型 - perf:
Progress
环形进度条支持设置透明背景 - perf: 其他问题修复、全局示例更新、示例样式风格统一
v1.7.2
- feat: 新增多选组
Checkbox-group
功能组件 - feat: 图片预览组件增加点击监听、关闭预览操作;修复初始化样式错误问题
- perf:
Pickers
、Carousel
、Actionsheet
等组件示例更新,样式优化 - fix: 修复下拉刷新组件当没填满高度时样式混乱、刷新后还有提示语暴露在外面问题
- fix: 修复部分组件按需加载引入方式报错问题
v1.7.1
- feat: 新增
Cascader
多级地址级联选择器组件 - feat: 新增
Sticky
粘性布局组件 - feat: 新增
VideoPlayer
视频播放器组件 - feat: 新增
LivePlayer
直播播放器组件 - feat:
Picker
省份选择器支持省份-城市格式选择 - feat:
Checkbox
组件支持点击事件外部监听 - perf:
NoticeBar
通知组件默认样式与全局主题统一 - perf:
Carousel
走马灯组件默认样式与全局主题统一 - perf:
Drawer
抽屉组件默认样式与全局主题统一 - perf: 删除一些外部链接、全局图片体积优化
v1.7.0
- feat: 新增
Nav
导航菜单组件,支持水平布局和垂直布局 - feat:
ActionSheet
组件新增自定义slot功能 - feat:
Tabs
组件新增折叠菜单模式,增加tabs折叠菜单模式示例 - feat:
Card
组件支持垂直布局、水平布局和slot、新增fluent风格样式 - feat:
Grid
组件内容支持垂直布局和水平布局 - feat:
Progress
组件新增自定义slot功能 - feat:
SearchBar
组件新增自定义slot功能、默认样式优化 - feat:
Switch
组件新增fluent风格样式 - feat:
DataPicker
组件类型新增period时间段选择器 - fix:
Calendar
日期选择组件修复连续多选高亮区域显示错误问题
v1.6.0
- feat: 新增面包屑路径组件
- feat:
ActionSheet
组件新增confirm类型,新增fluent风格样式 - feat:
Modal
组件支持取消加载过渡动画 - feat: 新增农历日期选择器示例
- fix: 修复
Button
组件连续点击或长按时内部文字被选中出现复制操作的问题 - fix: 修复
Badge
组件当内容长度为1时不是正圆问题、修复当badge内数字长度大于1时tabs内容被遮挡问题
v1.5.0
- feat: 组件库支持使用时按需引入
- feat:
Drawer
抽屉组件onHide事件 - fix:
Switch
组件切换无效
v1.4.0
- feat:
Date-picker
组件增加农历选择功能 - feat:
Drawer
抽屉组件 - feat: 无限加载组件
- fix: 图片预览、下拉刷新、输入框功能更新
- fix: 修复输入框clear按钮点击区域过小的问题
- feat: 新增骨架屏组件
- feat: 新增
Empty
空状态组件
v1.3.0
- feat: 新增
Rate
评分组件 - fix: 修复
Tabs
组件面板滑动问题 - fix: 优化轮播点击事件
- feat: 扩展
Datepicker
组件自定义年月格式 - fix: 修复
Toast
因动画过渡效果导致的体验问题 - fix: 修复
PullToRefresh
组件触发刷新机制问题
v1.2.3
- pref: 优化内部子组件注册方式
v1.2.2
- feat: 新增指令加载组件
Loading
- feat:
Tabs
组件新增面板滑动 - fix: 优化
Toast
、Message
、Modal
组件销毁机制
v1.2.1
- fix: 优化
Pikcer
组件用法 - fix: 优化
Datepicker
组件用法 - fix: 修复
Toast
组件位置样式问题
v1.2.0
- feat: 更新
Popover
组件位置属性 - fix: 修复
PopoverItem
因flex弹性布局造成的中文强制换行问题 - feat:
Previewer
预览组件支持不循环图片展示 - feat: 新增
SwipeAction
滑动操作组件 - feat: 优化
ActionSheet
组件分享模式 - feat: 简化
CalendarPikcer
的使用方式 - feat:
Accordion
折叠面板组件优化使用方式, 初始化打开面板采用数组传值打开多面板 - fix: 修复
Slider
组件滑动时值不正确的问题 - feat:
Accordion
组件新增onPanelClick事件 - fix: 修复
Popover
组件点击穿透问题, 统一组件注册方式
🚩
BREAKING CHANGES
v1.2.0 版本对组件名前缀进行统一,原
am
前缀组件更改为ok
前缀。组件库内部class
类名由am-
前缀调整为ok-
。若在旧项目中对组件样式做过调整,在使用新版本组件时,注意要更改对应使用组件的前缀名为ok-
。
v1.1.1
- fix: 修复popover组件点击穿透问题, 统一组件注册方式
v1.1.0
- feat: 新增VUI less样式引入方式,更好的支持主题定制功能
- feat: 新增Previewer图片预览组件, 优化ios加载图片白框兼容问题,图片缓存问题
- feat: 新增Calendar日历组件,支持周日最前最后显示,支持农历、节气显示
- feat: 新增PullToRefresh拉动刷新组件
- feat: 新增Message全局提示组件
- feat: 新增Modal对话框组件全局调用方式
- feat: 新增Toast组件append2dom属性以及单加载提示
- feat: 新增Carousel组件间距属性,支持多轮播项同页展示
- fix: 修复Progress进度条组件条形自定义样式问题
- feat: 新增Grid宫格组件
- feat: 新增TabBar组件路由模式
- feat: 新增calendarPicker组件
v1.0.1
- feat: 增加jest测试
- fix: carousel走马灯动画轮播,新增自动播放属性
- fix: 修复tabBar selected选中,switch初始化,textarea样式
- fix: 修复SearchBar autofocus功能,badge数字0显示
- fix: 修复list item多行显示时箭头bug
- feat: toast添加手动关闭功能
- fix: 修复stepper input输入以及最小值限制bug
- fix: 修复selectList组件check样式
v1.0.0
- feat: 新增环形进度条
- feat: imagePicker添加删除图片事件
- fix: 修复button、carousel、imagepIcker样式
- feat: pickerView选择器、修复picker-column根据传入列数展示高度
- fix: 修复radio组件disabled状态
- fix: 修复accordion组件设置初始打开面板
- fix: 修复noticebar以及tag组件
- feat: tabs组件增加滑动标签功能
v0.9.16
- fix: list组件箭头问题
v0.9.15
- fix: tabsList 组件tabs name过长显示
- fix: 修复steppers组件在ios端readonly会调用键盘的bug
- fix: stepper组件输入状态失焦默认值,非数字字符过滤
v0.9.14
- fix: 优化textarea组件,支持计数功能
- feat: result结果页组件
- fix: stepper双向绑定,tabs组件支持dot状态
- feat: stepper组件增加自定义图标属性
- feat: input组件支持内容左对齐
v0.9.13
- fix: stepper双向绑定,tabs组件支持dot状态
- fix: input\textarea数据双向绑定
v0.9.12
- fix: 修复input和textarea组件清除按钮不能清除掉value问题,修复input组件type:number无法限制输入长度
- fix: 修复switch value数据绑定问题
- fix: 修复steps finish和progress状态
v0.9.11
- fix: actionsheet组件事件数据改为对象{item, index}
v0.9.10
- fix: steps组件属性校验
v0.9.9
- fix: list组件与下拉刷新冲突
- refactor: 调整actionsheet组件动画函数
- feat: steps进度组件添加node类型模式,switch组件添加morden类型样式
- feat: checkbox支持双向绑定
- fix: searchbar组件初始化宽度显示问题
v0.9.8
- feat: 添加actionsheet 图标文字模式
组件库使用
- 项目脚手架目录运行
npm i @21cnfe/vui
- 项目主入口 main.js引入组件库
全量引入方式:
import Vui from '@21cnfe/vui'
import '@21cnfe/vui/styles/antd-mobile.css'
Vue.use(Vui)
按需引入方式:
安装 babel-plugin-component
npm i babel-plugin-component
在 babel.config.js
中加入以下代码:
plugins: [[
// 配置按需引入插件babel-plugin-component
"component",
{
// 库的名字
"libraryName": ""@21cnfe/vui",
// 存放库文件的文件夹
"libDir": "dist/lib/components",
}
]]
最后按照如下方式引入,插件会自动帮你转换路径
-1、全局注册
import { Actionsheet } from '@21cnfe/vui'
Vue.component('actionsheet', Actionsheet)
-2、局部注册
import { Actionsheet } from '@21cnfe/vui'
export default {
components: {
Actionsheet
}
}