hcysunyang 大哥曾今说过,想做一个开源项目,最简单的就是写组件库。今天,它来了。
这个开源项目地址:Github 。
文档暂时是这个:Docs 。
演示效果看这个:Demo,不同于一些组件库,这边PC端也是完整兼容的。
这是一个基于 Vue 3.x 的 mobile 组件库。当然它也有 2.x 的版本,不过不想维护了,忽略。
相比其他家出名大厂的,它的组件贼多,有 100+ 基础组件。
还有一些常规特点:
- 单元测试覆盖
- 完善中文文档
- 支持按需引入
- 支持主题定制
- Composition API + Typescript + Template 编写
下面讲一下一些比较设计的地方:
渐进式输入组件
具个例子,最常见的选择器,提供来了PickerView
/ PickerPopup
/ Picker
三种使用方式:
1. PickerView
选择直接暴露出来,适合嵌套到其他组件中
2. PickerPopup
用一个弹窗嵌套起来,通过 v-model:visible
来控制显隐。
3. Picker
带有输入 field ,可以直接放在表单中使用。
这种渐进式的组件形式,覆盖到了更多的使用场景。同样的,还有 DatePicker
,Calendar
也是渐进式组件。
多API覆盖
很多表单组件和反馈组件都提供 API 的形式,即开即用。
目前提供 API 的组件有:
- Notify.showNotify
- Notify.hideNotify
- Toast.showToast
- Toast.hideToast
- Toast.showLoading
- Toast.hideLoading
- ImagePreview.previewImage
- Dialog.showDialog
- Picker.showPicker
- Cascader.showCascader
- ActionSheet.showActionSheet
- DatePicker.showDatePicker
- Calendar.showCalendar
- Popover.showPopover
- PopDialog.showPopDialog
- PopMenu.showPopMenu
…
咋用
由于组件较多,比较推荐按需加载的方式来使用。
1. 安装
npm i -S vfox@beta
2. 安装按需加载组件
npm i babel-plugin-import -D
在 babel.config.js
中配置:
module.exports = {
...
plugins: [
[
"import",
{
libraryName: "vfox",
libraryDirectory: "es",
style: true,
camel2DashComponentName: false
},
"vfox"
]
]
}
3. 按需加载组件
import { Button } from 'vfox'
app.use(Button)
4. API调用
import { Toast } from 'vfox'
export default {
mounted() {
Toast.showToast({
title: '成功',
type: 'success',
duration: 2000
})
}
}
之前都是自娱自乐,现在欢迎大家体验一下,顺便提提 issues,感谢感谢。