@21cnfe/vui

基于 Ant Design 和 Vue 的移动端UI组件库。

Usage no npm install needed!

<script type="module">
  import 21cnfeVui from 'https://cdn.skypack.dev/@21cnfe/vui';
</script>

README

vui 使用必读

Changelog

版本

v1.6.0

  1. feat: 新增面包屑路径组件
  2. feat: actionSheet组件新增confirm类型,actionSheet组件新增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
  2. feat: Tabs组件新增面板滑动
  3. 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. 修复input和textarea组件清除按钮不能清除掉value问题,修复input组件type:number无法限制输入长度
  2. 修复switch value数据绑定问题
  3. 修复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引入组件库

全量引入方式

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
  }
}