大家好，我是 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 ?）
往期文章推薦