更新记录

v2.4.01(2024-06-12)

  • 优化已知问题。

v2.4.0(2024-06-11)

  • 新增 国际化支持,组件内置处理,详见文档介绍。

  • 新增 TableWeex 表格 组件,nvue端专用组件,仅支持app。

  • 新增 Parse 富文本解析 组件。

  • SearchBar 搜索栏 组件优化,新增支持v-model双向绑定值。

  • Cascader 级联选择器 组件优化,options数据中新增size属性支持单独设置字体大小。

  • ActionSheet 上拉菜单 组件优化,itemList数据中新增size属性支持单独设置字体大小。

  • DropdownMenu 下拉菜单 组件优化,新增部分属性用于指定options数据中约定属性key值。

  • DropdownList 下拉菜单 组件优化,新增部分属性用于指定options数据中约定属性key值。

  • Gallery 画廊 组件优化,新增部分属性用于指定urls数据中约定属性key值。

  • Tabs 标签页 组件优化,新增部分属性用于指定tabs数据中约定属性key值。

  • DataTag 标签选择 组件优化,新增部分属性用于指定options数据中约定属性key值。

  • Steps 步骤条 组件优化,新增部分属性用于指定items数据中约定属性key值。

  • Fab 浮动按钮 组件优化,新增部分属性用于指定fabs数据中约定属性key值。

  • Drag 拖拽排序 组件优化,新增部分属性用于指定itemList数据中约定属性key值。

  • SegmentedControl 分段器 组件优化,新增部分属性用于指定values数据中约定属性key值。

  • Vtabs 纵向选项卡 组件优化,新增部分属性用于指定vtabs数据中约定属性key值。

  • Tabs 标签页 组件优化,新增itemPadding属性设置item项左右间距。

  • Panel 面板 组件优化,新增属性rowReverse设置图片与内容是否对换位置排布。

  • UploadVideo 视频上传 组件优化,新增删除事件,返回删除图片索引信息。

  • Upload 图片上传 组件优化,新增删除事件,返回删除图片索引信息,选则图片返回本地图片File信息。

  • Modal 模态框 组件优化,修复已知问题。

  • Drag 拖拽排序 组件优化,app-vue下拖拽元素时阻止事件的默认行为。

  • Fab 浮动按钮 组件优化,修复已知问题。

  • MovableView 可移动的视图容器 组件优化,app-vue下拖拽元素时阻止事件的默认行为。

  • Slider 滑块 组件优化,修复已知问题。

  • Drag 拖拽排序 组件优化,标题分组模式时,是否显示右侧 menu 图标。

  • Select 选择器 组件优化,修复数据传空数组时列表未更新的问题,新增插槽list。

  • ActionSheet 上拉菜单 组件优化,新增部分属性,详见文档。

  • DropdownList 下拉菜单 组件优化,新增插槽设置自定义item项内容,详见文档说明。

  • DropdownMenu 下拉菜单 组件优化,新增插槽设置自定义item项内容,详见文档说明。

  • Collapse 折叠面板 组件优化,新增部分属性,详见文档。

  • Landscape 压屏窗 组件优化,新增top属性设置上下偏移距离,默认居中显示。

  • Modal 模态框 组件优化,新增top属性设置上下偏移距离,默认居中显示。

  • DatePicker 日期时间选择器 组件优化,新增属性设置区间选择时,传入默认值(value和valueEnd)时默认选中状态是在结束日期还是开始日期。

  • Waterfall 瀑布流 组件优化,新增属性设置是否在起始位置插入数据,详见文档说明。

  • Divider 分割线 组件优化,支持在渐变背景色下使用,移除部分属性。

  • FormField 表单数据传递 组件优化,修复Hbuilderx最新版(4.17.20240511+)开发工具编译出错的问题。

  • ImageCropper (图片裁剪) 组件优化,修复已知问题,新增部分属性,详见文档。

  • SingleInput 单输入框组件优化,修复支付宝平台自动聚焦时样式出错的问题。

  • Switch 开关 组件优化, 新增部分属性用于调整背景色。

  • DigitalRoller 数字滚轮 组件优化, 修复已知问题。

  • Table 表格 组件优化,columnColorMethod 方法中参数fn方法新增返回列索引参数。

  • Footer 页脚 组件优化,新增属性设置 bottom 值,属性 isFixed为true时有效。

  • DatePicker 日期时间选择器 组件优化,修复已知问题。

  • Radio 单选框 组件优化,新增属性styleType设置选中后样式。

  • Picker 选择器 组件优化,优化联动选择时传空数组数据未进行清空的问题。

  • DatePicker 日期时间选择器 组件优化,修复区间选择年份时,切换报错的问题。

  • SwipeAction 滑动菜单 组件优化,修复已知问题。

  • DataTag 标签选择组件优化,修复已知问题。

  • Form 表单校验 组件优化,修复已知问题。

  • Table 表格 组件优化,新增 @scrolltolower 触底事件, 属性height不为0时有效。

  • NoticeBar 通告栏 组件优化,修复部分文本因行高设置显示不全的问题。

  • ImageCropper 图片裁剪 组件优化,修复已知问题。

  • 优化部分已知问题。

v2.3.0(2024-02-19)

  • 新增 Number 数字 组件,DigitalNumbers字体。

  • 新增 BackgroundImage 背景图 组件。

  • 新增常用的基础样式class,用于页面布局,详见文档。

  • Barcode 条形码 组件优化,新增支持类型:Code128,微信小程序端改为type=2d实现。

  • Qrcode 二维码 组件优化,微信小程序端改为type=2d实现。

  • Circle 圆形进度条 组件优化,微信小程序端改为type=2d实现。

  • Fab 浮动按钮 组件优化,增加按钮 openType 属性支持, openType 属性详见官网button按钮文档介绍。

  • Utils 工具 类组件优化,新增部分方法:生成随机颜色,金额转大写等。

  • ShareSheet 分享面板 组件优化,新增部分属性以及事件,详见文档。

  • Button 按钮 组件优化,新增部分属性以及事件,详见文档。

  • Vtabs 纵向选项卡 组件优化,新增 @scrolltolower 事件(仅linkage=false 时有效)。

  • Select 选择器 组件优化,新增 @change 事件(仅type=select 时有效)。

  • StatusBar 状态栏 组件优化,新增属性设置当isFixed为true时是否默认占位,防止高度塌陷,详见文档使用。

  • Table 表格 组件优化,修复值为0时重置成空的问题。

  • Tabbar 标签栏 组件优化,修复设置字体图标大小可能不居中的问题。

  • ActionSheet 上拉菜单 组件优化,部分逻辑调整。

  • BottomNavbar 底部导航栏 组件优化,部分逻辑调整。

  • DigitalKeyboard 数字键盘 组件优化,部分逻辑调整。

  • Footer 页脚 组件优化,部分逻辑调整。

  • Gallery 画廊 组件优化,部分逻辑调整。

  • LicensePlate 车牌号键盘 组件优化,部分逻辑调整。

  • SafeArea 底部安全区域组件优化,部分逻辑调整。

  • Select 选择器 组件优化,部分逻辑调整。

  • ShareSheet 分享面板 组件优化,部分逻辑调整。

  • Tabbar 标签栏 组件优化,部分逻辑调整。

  • Drawer 抽屉 组件优化,部分逻辑调整。

  • Modal 模态框 组件优化,部分逻辑调整。

  • BottomPopup 底部弹出层 组件优化,部分逻辑调整。

  • SegmentedControl 分段器 组件示例优化,新增自定义高度示例。

  • Lazyload 图片懒加载 组件优化修复已知问题。

  • Dialog 对话框 组件优化,默认标题改为 提示。

  • WhiteSpace 上下间距 组件优化,默认值调整为8,16,24rpx。

  • Switch 开关选择器 组件优化,新增插槽支持设置圆形按钮内显示内容,仅type=switch有效,nvue暂不支持。

  • DatePicker 日期时间选择器 组件优化,区间选择加入属性判断点击确认按钮是否自动赋值开始日期或结束日期,切换区间按钮显示对应开始日期时间或结束日期时间。

  • Poster 绘制分享海报 组件优化,绘制图片支持设置是否等比裁剪参数,来保证图片不会变形,详见文档。

  • Table 表格 组件优化,修复小程序端固定高度内容可能显示不全的问题。

  • Switch 开关 组件优化,修复小程序端底部出现间隙导致无法居中问题。

  • Request 网络请求 组件 优化,timeout 值调整,大于2000ms时生效。

  • 全局配置文件(fui-config)调整。

  • 修复其他已知问题。

查看更多

平台兼容性

HbuilderX/cli最低兼容版本
3.7.13

uni-app

Vue2 Vue3
?
app-vue app-nvue app-android app-ios
? ? ? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?
微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 钉钉小程序 快手小程序 飞书小程序 京东小程序
? ? ? ? ? ? ? ? ?
快应用-华为 快应用-联盟
? ?

uni-app x

app-android app-ios
? ?
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
? ? ? ? ? ? ? ? ?

First UI 移动端框架优质选择

FirstUI 将出品多种框架下组件库供开发者使用,其中包含uni-app、微信小程序、支付宝小程序等,后期将会陆续上线,目前上线的版本有uni-app版本与微信小程序版本!

FirstUI UNI版

First UI UNI版 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序(微信、支付宝、百度、字节、QQ)、H5。

官网地址:https://www.firstui.cn

文档地址:https://doc.firstui.cn

FirstUI 微信小程序版

FirstUI-weixin 是一套基于微信小程序开发的组件化、可复用、易扩展、低耦合的原生微信小程序UI组件库。

官网地址:https://www.firstui.cn

文档地址:https://wxdoc.firstui.cn

==============================================================

FirstUI UNI版 快速上手

使用 First UI 前,请确保你已经学习并熟练使用过 uni-app

star this repo

fork this repo

npm

license

安装

方式一 :通过 npm 安装

使通过 npm 安装,需要先通过 vue-cli 创建 uni-app 项目,详见
// # Using npm
npm install firstui-uni

方式二 :通过下载代码

通过 GitHub 或者 FirstUI官网(VIP) 下载 First UI 的代码,然后 将 components/firstui/ 目录拷贝到自己的项目中。
// # GitHub
git clone https://github.com/FirstUI/FirstUI.git

方式三 :选择需要的模块引入

下载 First UI 的代码,在 components/firstui/ 目录下找到需要的组件拷贝到自己的项目中。

如何使用

按照以下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看。

第一种:在页面中引用、注册
``` js import fuiButton from "@/components/firstui/fui-button/fui-button" export default { components:{ fuiButton } } ```
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步,如果不了解easycom,可先查看 官网文档
在 `pages.json` 中 添加配置: ``` js // 下载安装时配置 "easycom": { "autoscan": true, "custom": { "fui-(.*)": "@/components/firstui/fui-$1/fui-$1.vue" } } // 使用npm安装时配置(配置完成后重新编译运行) "easycom": { "autoscan": true, "custom": { "fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue" } } ```

使用组件

引入组件后,可以在 页面 中直接使用组件

<fui-button text="默认按钮"></fui-button>

相关链接

官网地址:https://www.firstui.cn

文档地址:https://doc.firstui.cn

GitHub地址:https://github.com/FirstUI/FirstUI

其他说明

First UI分为 开源版商业版,所有示例或文档中加 V 的表示需要开通会员才可获取源码使用,会员内容不会发布到任何公开渠道。

开通会员、版权约束说明以及详细介绍请参考 FAQ中 会员介绍

更新日志

V1.4.0(2022-03-16)

  • 新增 Circle 圆形进度条 组件(VIP组件)。

  • 新增 Skeleton 骨架屏 组件(VIP组件)。

  • 新增 CubicBezier 贝塞尔曲线 组件(VIP组件)。

  • 新增 SlideVerify 滑动验证 组件(VIP组件)。

  • 新增 RotateVerify 旋转验证 组件(VIP组件)。

  • 新增 SliderCaptcha 滑块拼图验证 组件(VIP组件)。

  • 新增 OverflowHidden 内容超出隐藏 组件(VIP组件)。

  • 新增 Backtop 回到顶部 组件(VIP组件)。

  • 新增 Lazyload 图片懒加载 组件(VIP组件)。

  • 新增 Waterfall 瀑布流 组件(VIP组件)。

  • 优化部分组件在vue3下显示异常,控制台报出警告的问题。

  • 优化 Upload 图片上传 组件。新增属性设置删除图片时是否弹框确认;图片上传数到达限制数max时隐藏选择框。

  • 修复 Preview 表单预览 组件改变数据页面不更新的bug。

  • 优化 Button 按钮 组件在Nvue以及PC中的点击效果。

  • 优化 Card 卡片 组件在Nvue中样式显示不正确的问题。

  • 优化 Message 消息提示 组件,部分props属性可在show方法中传值覆盖。

  • 优化 Select 选择器 组件,修复单选时设置默认选中项无效的问题。

  • 优化 CountDown 倒计时 组件,修复初始化传0触发倒计时结束事件的问题。

  • 修复 Layout 栅格布局 组件属性gutter不生效的bug。

  • 修复 InputNumber 数字输入框 组件在vue3下 blur 事件未在emits中申明的问题。

  • 优化若干已知问题。

V1.3.0(2021-12-31)

  • 新增 Calendar 日历 组件(VIP组件)。

  • 新增 Cascader 级联选择器 组件(VIP组件)。

  • 新增 Slider 滑块 组件(VIP组件)。

  • 新增 Rate 评分 组件(VIP组件)。

  • 新增 Select 选择器 组件(VIP组件)。

  • 新增 Upload 图片上传 组件(VIP组件)。

  • 新增 Gallery 画廊 组件(VIP组件)。

  • 新增 BubbleBox 气泡框 组件(VIP组件)。

  • 新增 BottomNavbar 底部导航栏 组件(VIP组件)。

  • 新增 CountDown 倒计时 组件(VIP组件)。

  • 新增 CopyText 长按复制 组件(VIP组件)。

  • 新增 Timer 计时器 组件(VIP组件)。

  • 新增 Qrcode 二维码 组件(VIP组件)。

  • 新增 Barcode 条形码 组件(VIP组件)。

  • 新增 Autograph 手写签名 组件(VIP组件)。

  • 修复 Textarea 多行输入框 组件回车无法换行的问题。

  • 优化 Request 网络请求 组件,新增加载中提示信息配置项。

  • 优化 Icon 图标 组件,新增部分图标。

  • 优化若干已知问题。

V1.2.0(2021-11-22)

  • 新增 Tabbar 标签栏 组件(VIP组件)。

  • 新增 ActionSheet 上拉菜单 组件。

  • 新增 Toast 轻提示 组件。

  • 新增 Dialog 对话框 组件。

  • 新增 DropdownMenu 下拉菜单 组件。

  • 新增 DropdownList 下拉菜单 组件。

  • 新增 Modal 模态框 组件(VIP组件)。

  • 新增 Landscape 压屏窗 组件(VIP组件)。

  • 新增 Message 消息提示 组件(VIP组件)。

  • 新增 BottomPopup 底部弹出层 组件。

  • 新增 TopPopup 顶部弹出层 组件。

  • 新增 Drawer 抽屉 组件。

  • 新增 NoticeBar 通告栏 组件(VIP组件)。

  • 新增 TimeAxis 时间轴 组件(VIP组件)。

  • 新增 Steps 步骤条 组件(VIP组件)。

  • 新增 Progress 进度条 组件(VIP组件)。

  • 新增 Collapse 折叠面板 组件。

  • 新增 SwiperDot 轮播图指示点 组件(VIP组件)。

  • 新增 DigitalRoller 数字滚轮 组件(VIP组件)。

  • 新增 DigitalKeyboard 数字键盘 组件(VIP组件)。

  • 新增 LicensePlate 车牌号键盘 组件(VIP组件)。

  • 新增 CountdownVerify 验证码倒计时 组件(VIP组件)。

  • 新增 Sticky 吸顶容器 组件(VIP组件)。

  • 新增 Fab 浮动按钮 组件(VIP组件)。

  • 新增 ShareSheet 分享面板 组件(VIP组件)。

  • 新增 FilterBar 筛选栏 组件(VIP组件)。

  • 新增 SwipeAction 滑动菜单 组件。

  • 新增 Picker 选择器 组件(VIP组件)。

  • 新增 DatePicker 日期时间选择器 组件(VIP组件)。

  • 新增 门户模板(物料)。

  • 优化掉部分组件中对头条小程序做兼容的冗余代码。

  • 优化若干已知问题。

V1.1.0(2021-09-07)

  • 调整组件对vue3支持与uni-app官方一致。

  • 新增 Panel 面板 组件(VIP组件)。

  • 新增 Preview 表单预览 组件(VIP组件)。

  • 新增 Empty 缺省页 组件。

  • 新增 SegmentedControl 分段器 组件。

  • 新增 Pagination 分页器 组件。

  • 新增 NavBar 导航栏 组件(VIP组件)。

  • 新增 Tabs 标签页 组件。

  • 新增 Tag 标签 组件。

  • 新增 Backdrop 遮罩层 组件。

  • 新增 Result 结果页 组件(VIP组件)。

  • 新增 Avatar 头像 组件。

  • 新增 Form 表单校验 组件(VIP组件)。

  • 新增 Validator 表单验证(JS)组件(VIP组件)。

  • 新增 SingleInput 单输入框 组件(VIP组件)。

  • 新增 IndexList 索引列表 组件(VIP组件)。

  • 新增 SearchBar 搜索栏 组件(VIP组件)。

  • 新增 登录(A)模板(物料)。

  • 新增 登录(B)模板(物料)。

  • 新增 登录(C)模板(物料)。

  • 新增 登录(D)模板(物料)。

  • 优化若干已知问题。

V1.0.0(2021-08-02)

  • 新增 Color 色彩 ,First UI用色指南。

  • 新增 Icon 图标 组件,First UI字体图标库。

  • 新增 Button 按钮 组件。

  • 新增 Footer 页脚 组件。

  • 新增 Animation 动画 组件。

  • 新增 StatusBar 状态栏 组件。

  • 新增 Layout 栅格布局 组件(fui-row和fui-col)。

  • 新增 Grid 宫格 组件(fui-grid和fui-grid-item)。

  • 新增 List 列表 组件(fui-list和fui-list-cell)。

  • 新增 Card 卡片 组件。

  • 新增 Input 输入框 组件。

  • 新增 InputNumber 数字输入框 组件。

  • 新增 Label 标签 组件。

  • 新增 FormField 表单数据传递 组件(微信/百度/QQ小程序)。

  • 新增 Radio 单选框 组件。

  • 新增 Checkbox 复选框 组件。

  • 新增 Switch 开关 组件。

  • 新增 Textarea 多行输入框 组件。

  • 新增 Loading 加载 组件。

  • 新增 LoadAni 加载动画 组件(VIP组件)。

  • 新增 Badge 徽章 组件。

  • 新增 Alert 警告框 组件。

  • 新增 Divider 分割线 组件。

  • 新增 LoadMore 加载更多 组件。

  • 新增 Clipboard 复制文本 组件(VIP组件)。

  • 新增 Request 网络请求 组件(VIP组件)。

  • 新增 Utils 工具 类组件。

  • 新增 Poster 绘制分享海报 组件(VIP组件)。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问