OpenTiny Vue 3.12.0 发布:文档大优化!增加水印和二维码两个新组件🎈

你好,我是 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位是新贡献者,欢迎新朋友们👏

以下是新贡献者:

也感谢老朋友们对 OpenTiny 的辛苦付出!

大家可以更新 @opentiny/[email protected] 进行体验!

组件文档优化

为了提升开发者阅读文档的体验,从9月份至今,我们花了整整三个月时间对 54 个高频组件的 demo / api 文档进行全面的优化。

希望你能喜欢这波优化,如果你在使用过程中,发现有描述不清楚、不合理、不美观之处,也希望你能给我们提交 Issue 进行反馈。

🎉开发者的福音:TinyVue 组件库文档大优化!类型更详细,描述更清晰!

Watermark 水印

水印组件用于保护文档的版权,防止文档被非法复制或盗用,常见的使用场景有:

  • 在公司内部文档中添加水印,以防止机密信息泄露
  • 在商业合同或法律文件中添加水印,以保护文件的真实性和完整性
  • 在电子书籍或其他数字内容中添加水印,以防止盗版和非法传播
  • 在社交媒体发布图片时添加水印,以保护自己的版权

Watermark 使用方式很简单,只需要用水印组件包裹要添加水印的内容即可。

html 复制代码
<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>

效果如下:

其中水印内容可以支持调整宽高、旋转角度、字体、间距等,并且支持图片水印。

图片水印效果:

水印组件链接:opentiny.design/tiny-vue/zh...

欢迎体验!

QrCode 二维码

二维码组件的使用场景非常丰富:

  • 线下演讲时,可以在 PPT 放个人微信的二维码,方便听众用手机扫码获得讲师的联系方式,进行进一步的沟通
  • 商家可以在产品上印制二维码,用户通过扫描二维码来获取产品信息或说明书
  • 用户通过扫描二维码来登录网站或应用,提高登录的安全性和便捷性

QrCode 使用方式也很简单,只需要传入链接地址即可。

html 复制代码
<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>

效果如下:

可以尝试扫描上面的二维码,将会进入 TinyVue 官网。

二维码的大小、颜色、背景、间距等都支持配置,同时也支持自定义图片。

自定义图片的二维码效果:

二维码组件链接:opentiny.design/tiny-vue/zh...

欢迎体验!


欢迎加入 OpenTiny 开源社区。

添加微信小助手:opentiny-official,一起参与共建!

开源不易,请给 TinyVue 点个 Star ⭐ 鼓励下,感谢你对我们 OpenTiny 的大力支持!

源码:github.com/opentiny/ti...

联系我们

GitHub:github.com/opentiny/ti...(欢迎 Star ⭐)

官网:opentiny.design/tiny-vue

B站:space.bilibili.com/15284299

公众号:OpenTiny

相关推荐
uhakadotcom几秒前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
机器视觉知识推荐、就业指导21 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4926 分钟前
golang接口-interface
java·前端·golang
慕斯策划一场流浪33 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
蚝油菜花1 小时前
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
人工智能·开源
蚝油菜花1 小时前
PaperBench:OpenAI开源AI智能体评测基准,8316节点精准考核复现能力
人工智能·开源
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
蚝油菜花1 小时前
DreamActor-M1:字节跳动推出AI动画黑科技,静态照片秒变生动视频
人工智能·开源
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js