OpenTiny Vue 3.12.0 釋出：文件大最佳化！增加水印和二維碼兩個新元件🎈

Kagol發表於2023-12-07

Vue元件

你好，我是 Kagol。

非常高興跟大家宣佈，2023年11月30日，OpenTiny Vue 釋出了 v3.12.0 🎉。

OpenTiny 每次大版本釋出，都會給大家帶來一些實用的新特性，10.24 我們釋出了 v3.11.0 版本，增加了富文字、ColorPicker 等4個新元件，該版本共有23位貢獻者參與。

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

本次 3.12.0 版本主要有以下更新：

全面最佳化 54 個高頻元件的 Demo / API 文件，讓文件更加清晰易懂、符合預期
Watermark 水印元件
QrCode 二維碼元件

本次版本共有21位貢獻者參與開發，其中有8位是新貢獻者，歡迎新朋友們👏

以下是新貢獻者：

@fanbingbing16 made their first contribution in #686
@dyh333 made their first contribution in #667
@betavs made their first contribution in #719
@betterdancing made their first contribution in #742
@David-TechNomad made their first contribution in #772
@falcon-jin made their first contribution in #844
@wuyiping0628 made their first contribution in #944
@James-9696 made their first contribution in #970

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

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

元件文件最佳化

為了提升開發者閱讀文件的體驗，從9月份至今，我們花了整整三個月時間對 54 個高頻元件的 demo / api 文件進行全面的最佳化。

希望你能喜歡這波最佳化，如果你在使用過程中，發現有描述不清楚、不合理、不美觀之處，也希望你能給我們提交 Issue 進行反饋。

🎉開發者的福音：TinyVue 元件庫文件大最佳化！型別更詳細，描述更清晰！

Watermark 水印

水印元件用於保護文件的版權，防止文件被非法複製或盜用，常見的使用場景有：

在公司內部文件中新增水印，以防止機密資訊洩露
在商業合同或法律檔案中新增水印，以保護檔案的真實性和完整性
在電子書籍或其他數字內容中新增水印，以防止盜版和非法傳播
在社交媒體釋出圖片時新增水印，以保護自己的版權

Watermark 使用方式很簡單，只需要用水印元件包裹要新增水印的內容即可。

<template>
  <tiny-watermark v-bind="params">
    <div style="height: 500px"></div>
  </tiny-watermark>
</template>

<script setup>
import { reactive } from 'vue'
import { Watermark as TinyWatermark } from '@opentiny/vue'

const params = reactive({
  content: ['I ❤️ TinyVue', 'TinyVue is 👍'],
})
</script>

效果如下：

其中水印內容可以支援調整寬高、旋轉角度、字型、間距等，並且支援圖片水印。

圖片水印效果：

水印元件連結：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/watermark

歡迎體驗！

QrCode 二維碼

二維碼元件的使用場景非常豐富：

線下演講時，可以在 PPT 放個人微信的二維碼，方便聽眾用手機掃碼獲得講師的聯絡方式，進行進一步的溝通
商家可以在產品上印製二維碼，使用者透過掃描二維碼來獲取產品資訊或說明書
使用者透過掃描二維碼來登入網站或應用，提高登入的安全性和便捷性

QrCode 使用方式也很簡單，只需要傳入連結地址即可。

<template>
  <tiny-qr-code v-bind="params"></tiny-qr-code>
</template>

<script setup>
import { QrCode as TinyQrCode } from '@opentiny/vue'

const params = {
  value: 'https://opentiny.design/tiny-vue'
}
</script>

效果如下：