乐趣区

关于前端:OpenTiny-的这些特色组件很实用但你应该没见过

大家好,我是 Kagol,OpenTiny 开源社区经营,TinyVue 跨端、跨框架组件库外围贡献者,专一于前端组件库建设和开源社区经营。

后面给大家介绍了 OpenTiny 疾速创立 Vue Admin 后盾管理系统和一套代码同时在 Vue2 Vue3 中应用。

  • 一个 OpenTiny,Vue2 Vue3 都反对!
  • 🎊 这个 OpenTiny 开源我的项目的 CLI 可太牛了,两行命令创立一个好看大气的 Vue Admin 后盾管理系统,有手就会,连我的设计师敌人都学会啦啦

本文将给大家介绍 OpenTiny 的一些特色组件。

业界组件库有的组件,OpenTiny 也都有,业界组件库没有的组件,OpenTiny 也有。

从组件数量来说,OpenTiny 比业界支流的 Element Plus 和 Ant Design 都多,足足有 70 个组件。

有不少是业界组件库都没有的特色组件。

IpAddress IP 输入框

IpAddress 组件是一个很有“云服务特色”的组件,咱们能够用它来很不便地输出 IP 地址。

它次要反对以下个性:

  • 输出满 3 位主动跳到下一段号码
  • 只读态
  • 禁用态
  • 设置尺寸
  • 自定义分隔符

看着非常简单,然而很实用!欢送体验 👏

IpAddress 组件:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/ip-address

Fullscreen 全屏

Fullscreen 全屏组件看着性能也很简略,却十分实用。

它次要分成两种模式:

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

除此之外,Fullscreen 还反对以下个性:

  • 同时反对组件式和函数式两种应用形式
  • 按 ESC 退出全屏
  • 设置 zIndex 层级

一般全屏

沉迷式全屏

Fullscreen 组件:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/fullscreen

Split 面板宰割

Split 面板宰割也是一个很有用的布局组件,罕用于将一片区域,宰割为能够拖拽调整宽度或高度的两局部区域。

次要反对以下个性:

  • 横向和纵向两种宰割类型
  • 设置宽高阈值
  • 自定义分隔器
  • 嵌套应用

反对纵向宰割

值得一提的是,Split 还反对嵌套应用,从而给页面动静布局调整带来了更多可能和灵活性。

Split 组件:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/split

Calendar 日历

Calendar 组件是依照日历模式展现数据的容器。

次要反对以下个性:

  • 年 / 月两种显示模式
  • 自定义日期单元格
  • 增加日程事件
  • 自定义工具栏

Calendar 组件:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/calendar

Crop 图片裁切

Crop 组件次要用于图像裁切,基于 cropperjs,反对十分丰盛的性能。

  • 可预览
  • 反对 JPG 和 PNG 格局
  • 浏览图像能够手动调整抉择头像区域

Crop 组件:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/crop

说得再多,不如亲自体验下,OpenTiny 的更多特色组件,等你来摸索!

https://opentiny.design/tiny-vue

分割咱们

如果你对咱们 OpenTiny 的开源我的项目感兴趣,欢送增加小助手微信:opentiny-official,拉你进群,一起交换前端技术,一起玩开源。

OpenTiny 官网:https://opentiny.design/

OpenTiny 仓库:https://github.com/opentiny/

Vue 组件库:https://github.com/opentiny/tiny-vue(欢送 Star 🌟)

Angular 组件库:https://github.com/opentiny/ng(欢送 Star 🌟)

CLI 工具:https://github.com/opentiny/tiny-cli(欢送 Star 🌟)

往期文章举荐

  • 历史性的时刻!OpenTiny 跨端、跨框架组件库正式降级 TypeScript,10 万行代码重获新生!
  • 一个 OpenTiny,Vue2 Vue3 都反对!
  • 🎊 这个 OpenTiny 开源我的项目的 CLI 可太牛了,两行命令创立一个好看大气的 Vue Admin 后盾管理系统,有手就会,连我的设计师敌人都学会啦啦
  • 老板:你为什么要抉择 Vue?
退出移动版