非常高興跟大家宣布，2023年10月24日，OpenTiny Vue 發(fā)布了 v3.11.0???。

OpenTiny 每次大版本發(fā)布，都會(huì)給大家?guī)?lái)一些實(shí)用的新特性，8.14 我們發(fā)布了 v3.10.0?版本，增加了4個(gè)新組件，組件 Demo 支持在 Options 和 Composition api 之間切換。

??OpenTiny Vue 3.10.0 版本發(fā)布：組件 Demo 支持 Composition 寫(xiě)法，新增4個(gè)新組件

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

• RichTextEditor 富文本編輯器組件 - by?Caesar-ch

• ColorPicker 顏色選擇器組件 - by?GaoNeng-wWw

• CalendarView 日歷視圖組件 - by?kagol

• Divider 分割線組件 - by?vaebe

本次版本共有23位貢獻(xiàn)者參與開(kāi)發(fā)，其中有14位是新貢獻(xiàn)者，歡迎新朋友們??

以下是新貢獻(xiàn)者：

• @jack-zishan?made their first contribution in?#392

• @LinboLen?made their first contribution in?#478

• @vaebe?made their first contribution in?#471

• @allenli178?made their first contribution in?#488

• @Binks123?made their first contribution in?#500

• @yoyo201626?made their first contribution in?#513

• @wkif?made their first contribution in?#512

• @chenguang1994?made their first contribution in?#518

• @Zuowendong?made their first contribution in?#503

• @gweesin?made their first contribution in?#554

• @shonen7?made their first contribution in?#567

• @xlearns?made their first contribution in?#574

• @ianxinnew?made their first contribution in?#617

• @Xppp0217?made their first contribution in?#610

也感謝老朋友們對(duì) OpenTiny 的辛苦付出！

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

大家可以更新?@opentiny/vue@3.11.0?進(jìn)行體驗(yàn)！

RichTextEditor 富文本編輯器

該組件由?Caesar-ch?同學(xué)貢獻(xiàn)??

富文本編輯器雖然不是高頻組件，但在特定的領(lǐng)域，比如需求管理、內(nèi)容編輯、文章創(chuàng)作等，幾乎是必備組件之一。

為了滿足這些業(yè)務(wù)的需求，我們推出了 RichTextEditor 富文本組件，目前只是初版，只包含以下基礎(chǔ)功能：

• 加粗、斜體、下劃線、刪除線

• 引用

• 行內(nèi)代碼、代碼塊

• 有序列表、無(wú)序列表、任務(wù)列表

• 上標(biāo)、下標(biāo)

• 撤銷、重做

• 左對(duì)齊、右對(duì)齊、居中對(duì)齊

• 段落、H1-H6標(biāo)題

• 字號(hào)、行間距

• 高亮、文本顏色、背景色

• 清除格式

• 超鏈接

• 上傳圖片

• 插入/編輯表格

后續(xù)將不斷進(jìn)行豐富，歡迎朋友們一起參與共建。

使用起來(lái)非常簡(jiǎn)單：

以下是效果圖：

可以通過(guò) custom-toolbar 配置工具欄：

效果如下：

更多功能等你來(lái)體驗(yàn)！

ColorPicker 顏色選擇器

ColorPicker?顏色選擇組件用于在應(yīng)用程序和界面中讓用戶選擇顏色。它是一個(gè)交互式的元素，通常由一個(gè)色彩光譜、色相環(huán)和顏色值輸入框組成，用戶可以通過(guò)這些元素來(lái)選擇所需的顏色。ColorPicker的主要功能是讓用戶能夠精確地選擇特定的顏色，以便在應(yīng)用程序的各種元素中使用。

該組件是由 GaoNeng 同學(xué)貢獻(xiàn)的??，他還寫(xiě)了一篇 ColorPicker 組件開(kāi)發(fā)全流程的總結(jié)文章。

GaoNeng：我是如何為OpenTiny貢獻(xiàn)新組件的？

ColorPicker 使用方式很簡(jiǎn)單：

效果如下：

該組件功能非常強(qiáng)大，除了在色板中選擇顏色之外，還支持：

• 透明度調(diào)節(jié)

• 預(yù)定義顏色

• 顏色歷史

• 顏色選擇面板單獨(dú)使用

更多功能等你來(lái)體驗(yàn)！

透明度調(diào)節(jié)：

預(yù)定義顏色：

顏色歷史：

顏色面板單獨(dú)使用：

CalendarView?日歷視圖

大家都知道 DatePicker 日期選擇器，這個(gè)組件通過(guò)一個(gè)日期表格來(lái)選擇一個(gè)日期，日期表格的放大版本就是日歷表格，我們來(lái)看下對(duì)比圖。

DatePicker 日期表格：

CalendarView 日歷表格：

歡迎體驗(yàn)！

Divider?分割線

該組件由?vaebe?同學(xué)貢獻(xiàn)??

分割線相對(duì)比較簡(jiǎn)單，目前主要支持：

• 橫向和豎向分割線

• 添加分割線文案、調(diào)整文案位置

• 自定義分割線樣式

效果如下：

歡迎體驗(yàn)！

關(guān)于 OpenTiny

OpenTiny 是一套企業(yè)級(jí) Web 前端開(kāi)發(fā)解決方案，提供跨端、跨框架的UI組件庫(kù)，適配 PC 端 / 移動(dòng)端等多端，支持 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有靈活擴(kuò)展的低代碼引擎，包含主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等豐富的效率提升工具，可幫助開(kāi)發(fā)者高效開(kāi)發(fā) Web 應(yīng)用。

核心亮點(diǎn)：

• 跨端跨框架：?使用 Renderless 無(wú)渲染組件設(shè)計(jì)架構(gòu)，實(shí)現(xiàn)了一套代碼同時(shí)支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級(jí)別的邏輯定制和全模板替換，靈活性好、二次開(kāi)發(fā)能力強(qiáng)。

• 組件豐富：PC 端有100+組件，移動(dòng)端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動(dòng)，保證大數(shù)據(jù)場(chǎng)景下的流暢體驗(yàn)，除了業(yè)界常見(jiàn)組件之外，我們還提供了一些獨(dú)有的特色組件，如：Split 面板分割器、IpAddress IP 地址輸入框、Calendar 日歷、Crop 圖片裁切等。

• 低代碼引擎：低代碼引擎使能開(kāi)發(fā)者定制低代碼平臺(tái)。它是低代碼平臺(tái)的底座，提供可視化搭建頁(yè)面等基礎(chǔ)能力，既可以通過(guò)線上搭配組合，也可以通過(guò)下載源碼進(jìn)行二次開(kāi)發(fā)，實(shí)時(shí)定制出自己的低代碼平臺(tái)。適用于多場(chǎng)景的低代碼平臺(tái)開(kāi)發(fā)，如：資源編排、服務(wù)端渲染、模型驅(qū)動(dòng)、移動(dòng)端、大屏端、頁(yè)面編排等。

• 配置式組件：?組件支持模板式和配置式兩種使用方式，適合低代碼平臺(tái)，目前團(tuán)隊(duì)已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺(tái)，針對(duì)低碼平臺(tái)做了大量?jī)?yōu)化。

• 周邊生態(tài)齊全：?提供了基于 Angular + TypeScript 的 TinyNG 組件庫(kù)，提供包含 10+ 實(shí)用功能、20+ 典型頁(yè)面的 TinyPro 中后臺(tái)模板，提供覆蓋前端開(kāi)發(fā)全流程的 TinyCLI 工程化工具，提供強(qiáng)大的在線主題配置平臺(tái) TinyTheme。

  
  

歡迎加入 OpenTiny 開(kāi)源社區(qū)。添加微信小助手：opentiny-official 一起參與交流前端技術(shù)～

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉(cāng)庫(kù)：https://github.com/opentiny/

TinyEngine 源碼：?https://github.com/opentiny/tiny-engine

TinyVue 源碼：https://github.com/opentiny/tiny-vue

歡迎進(jìn)入代碼倉(cāng)庫(kù) Star??TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建，可以進(jìn)入代碼倉(cāng)庫(kù)，找到?good first issue標(biāo)簽，一起參與開(kāi)源貢獻(xiàn)~