Vfox-Vue3 组件库自荐

hcysunyang 大哥曾今说过,想做一个开源项目,最简单的就是写组件库。今天,它来了。

这个开源项目地址:Github 。

文档暂时是这个:Docs 。

演示效果看这个:Demo,不同于一些组件库,这边PC端也是完整兼容的。

这是一个基于 Vue 3.x 的 mobile 组件库。当然它也有 2.x 的版本,不过不想维护了,忽略。

相比其他家出名大厂的,它的组件贼多,有 100+ 基础组件。

还有一些常规特点:

  • 单元测试覆盖
  • 完善中文文档
  • 支持按需引入
  • 支持主题定制
  • Composition API + Typescript + Template 编写

下面讲一下一些比较设计的地方:

渐进式输入组件

具个例子,最常见的选择器,提供来了PickerView / PickerPopup / Picker 三种使用方式:

1. PickerView

选择直接暴露出来,适合嵌套到其他组件中

image.png

2. PickerPopup

用一个弹窗嵌套起来,通过 v-model:visible 来控制显隐。

3. Picker

带有输入 field ,可以直接放在表单中使用。

这种渐进式的组件形式,覆盖到了更多的使用场景。同样的,还有 DatePickerCalendar 也是渐进式组件。

多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,感谢感谢。

(0)
上一篇 2021年5月26日 下午1:56
下一篇 2021年5月26日 下午2:12

相关推荐

发表评论

登录后才能评论