?OpenTiny Vue 3.11.0 釋出：增加富文字、ColorPicker等4個新元件，迎來了貢獻者大爆發！

Kagol發表於2023-10-26
Vue元件

你好，我是 Kagol。

非常高興跟大家宣佈，2023年10月24日，OpenTiny Vue 釋出了 v3.11.0 ?。

OpenTiny 每次大版本釋出，都會給大家帶來一些實用的新特性，8.14 我們釋出了 v3.10.0 版本，增加了4個新元件，元件 Demo 支援在 Options 和 Composition api 之間切換。

?OpenTiny Vue 3.10.0 版本釋出：元件 Demo 支援 Composition 寫法，新增4個新元件

本次 3.11.0 版本主要增加以下新元件：

  • RichTextEditor 富文字編輯器元件 - by Caesar-ch
  • ColorPicker 顏色選擇器元件 - by GaoNeng-wWw
  • CalendarView 日曆檢視元件 - by kagol
  • Divider 分割線元件 - by vaebe

本次版本共有23位貢獻者參與開發，其中有14位是新貢獻者，歡迎新朋友們?

以下是新貢獻者：

也感謝老朋友們對 OpenTiny 的辛苦付出！

尤其感謝 pe-3 / Caesar-ch / GaoNeng-wWw / vaebe / Binks123。

大家可以更新 @opentiny/vue@3.11.0 進行體驗！

RichTextEditor 富文字編輯器

該元件由 Caesar-ch 同學貢獻?

富文字編輯器雖然不是高頻元件，但在特定的領域，比如需求管理、內容編輯、文章創作等，幾乎是必備元件之一。

為了滿足這些業務的需求，我們推出了 RichTextEditor 富文字元件，目前只是初版，只包含以下基礎功能：

  • 加粗、斜體、下劃線、刪除線
  • 引用
  • 行內程式碼、程式碼塊
  • 有序列表、無序列表、任務列表
  • 上標、下標
  • 撤銷、重做
  • 左對齊、右對齊、居中對齊
  • 段落、H1-H6標題
  • 字號、行間距
  • 高亮、文字顏色、背景色
  • 清除格式
  • 超連結
  • 上傳圖片
  • 插入/編輯表格

後續將不斷進行豐富，歡迎朋友們一起參與共建。

使用起來非常簡單：

<template>
  <tiny-rich-text-editor></tiny-rich-text-editor>
</template>

<script lang="ts" setup>
import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
</script>

以下是效果圖：

可以透過 custom-toolbar 配置工具欄：

<template>
  <tiny-rich-text-editor :customToolBar="customToolBar"></tiny-rich-text-editor>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'

const customToolBar = ref(['bold', 'italic'])
</script>

效果如下：

更多功能等你來體驗！

ColorPicker 顏色選擇器

ColorPicker 顏色選擇元件用於在應用程式和介面中讓使用者選擇顏色。它是一個互動式的元素，通常由一個色彩光譜、色相環和顏色值輸入框組成，使用者可以透過這些元素來選擇所需的顏色。ColorPicker的主要功能是讓使用者能夠精確地選擇特定的顏色，以便在應用程式的各種元素中使用。

該元件是由 GaoNeng 同學貢獻的?，他還寫了一篇 ColorPicker 元件開發全流程的總結文章。

GaoNeng：我是如何為OpenTiny貢獻新元件的？

ColorPicker 使用方式很簡單：

<template>
  <tiny-color-picker v-model="color" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ColorPicker as TinyColorPicker } from '@opentiny/vue'
const color = ref('#66ccff')
</script>

效果如下：

該元件功能非常強大，除了在色板中選擇顏色之外，還支援：

  • 透明度調節
  • 預定義顏色
  • 顏色歷史
  • 顏色選擇皮膚單獨使用

更多功能等你來體驗！

透明度調節：

預定義顏色：

顏色歷史：

顏色皮膚單獨使用：

CalendarView 日曆檢視

大家都知道 DatePicker 日期選擇器，這個元件透過一個日期表格來選擇一個日期，日期表格的放大版本就是日曆表格，我們來看下對比圖。

DatePicker 日期表格：

CalendarView 日曆表格：

歡迎體驗！

Divider 分割線

該元件由 vaebe 同學貢獻?

分割線相對比較簡單，目前主要支援：

  • 橫向和豎向分割線
  • 新增分割線文案、調整文案位置
  • 自定義分割線樣式

效果如下：

歡迎體驗！

關於 OpenTiny

OpenTiny 是一套企業級 Web 前端開發解決方案，提供跨端、跨框架的UI元件庫，適配 PC 端 / 移動端等多端，支援 Vue2 / Vue3 / Angular 多技術棧，擁有靈活擴充套件的低程式碼引擎，包含主題配置系統 / 中後臺模板 / CLI 命令列等豐富的效率提升工具，可幫助開發者高效開發 Web 應用。

核心亮點：

  1. 跨端跨框架：使用 Renderless 無渲染元件設計架構，實現了一套程式碼同時支援 Vue2 / Vue3，PC / Mobile 端，並支援函式級別的邏輯定製和全模板替換，靈活性好、二次開發能力強。
  2. 元件豐富：PC端有100+元件，移動端有30+元件，包含高頻元件 Table、Tree、Select 等，內建虛擬滾動，保證大資料場景下的流暢體驗，除了業界常見元件之外，我們還提供了一些獨有的特色元件，如：Split 皮膚分割器、IpAddress IP 地址輸入框、Calendar 日曆、Crop 圖片裁切等。
  3. 低程式碼引擎：TinyEngine 低程式碼引擎使能開發者定製低程式碼平臺。它是低程式碼平臺的底座，提供視覺化搭建頁面等基礎能力，既可以透過線上搭配組合，也可以透過下載原始碼進行二次開發，實時定製出自己的低程式碼平臺。適用於多場景的低程式碼平臺開發，如：資源編排、服務端渲染、模型驅動、移動端、大屏端、頁面編排等。
  4. 配置式元件：元件支援模板式和配置式兩種使用方式，適合低程式碼平臺，目前團隊已經將 OpenTiny 整合到內部的低程式碼平臺，針對低碼平臺做了大量最佳化
  5. 周邊生態齊全：提供了基於 Angular + TypeScript 的 TinyNG 元件庫，提供包含 10+ 實用功能、20+ 典型頁面的 TinyPro 中後臺模板，提供覆蓋前端開發全流程的 TinyCLI 工程化工具，提供強大的線上主題配置平臺 TinyTheme

歡迎加入 OpenTiny 開源社群。

新增微信小助手：opentiny-official，一起參與共建！

OpenTiny 官網：https://opentiny.design/

Vue元件庫：https://opentiny.design/tiny-vue

低程式碼引擎：https://opentiny.design/tiny-engine

Angular元件庫：https://opentiny.design/tiny-ng

OpenTiny 程式碼倉庫：https://github.com/opentiny/ （歡迎 Star ⭐）

往期文章推薦

相關文章