饿了么[element]还是华为云[OpenTiny]?

476 阅读1分钟

今天逛掘金的时候,无意发现了一套前端组件库,官网描述是这样的

Snipaste_2023-05-16_10-24-31.png

“一套跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 Vue 3,支持 PC 端和移动端。”

其中不乏有几个关键词,同时支持 vue2和vue3,还具备跨端能力。

vue2安装

npm i @opentiny/vue@2

vue3安装

npm i @opentiny/vue@3

这里贴上仓库地址,感兴趣的小伙伴可以去看看 github.com/opentiny


重点来了,说说这个UI库有哪些亮点组件(个人观点)

1、组件数量多,官方文档导航更清晰

Snipaste_2023-05-16_10-36-37.png Snipaste_2023-05-16_10-42-57.png

2、导航栏-菜单组件集成了实际业务场景

Snipaste_2023-05-16_10-58-02.png

如自定义搜索,自定义数据,自定义图标,拖拽菜单等等。

Snipaste_2023-05-16_10-55-58.png

3、表单组件 支持自定义表单校验提示信息的位置

Snipaste_2023-05-16_11-04-06.png 表单组件中不常见的IP类型输入框

Snipaste_2023-05-16_11-05-29.png 甚至支持自定义设置分隔符图标,扩展一下就是一个地图开发常见的经纬度输入框

Snipaste_2023-05-16_11-06-44.png

4、全屏组件

看着功能也很简单,却非常实用。

它主要分成两种模式:

  • pageOnly 普通全屏,只在浏览器窗口内的全屏
  • teleport 沉浸式全屏,充盈整个电脑屏幕的全屏

除此之外,Fullscreen 还支持以下特性:

  • 同时支持组件式和函数式两种使用方式
  • 按 ESC 退出全屏
  • 设置 zIndex 层级

5、裁剪图片组件

在vue项目中开发裁剪功能,基本上是使用vue-cropper来实现,这样就得安装依赖,OpenTiny内置了裁剪图片的组件,基础功能都是开箱即用。

Snipaste_2023-05-16_11-11-26.png

官方文档库地址 opentiny.design/tiny-vue/zh…