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

以下是新贡献者:

  • @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>

效果如下:

在这里插入图片描述

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

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

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

在这里插入图片描述

二维码组件链接:https://opentiny.design/tiny-vue/zh-CN/os-theme/components/qr-code

欢迎体验!


欢迎加入 OpenTiny 开源社区。

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

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

源码:https://github.com/opentiny/tiny-vue

联系我们

GitHub:https://github.com/opentiny/tiny-vue(欢迎 Star ⭐)

官网:https://opentiny.design/tiny-vue

B站:https://space.bilibili.com/15284299

公众号:OpenTiny

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/205453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

做题笔记:SQL Sever 方式做牛客SQL的题目--VQ29

----VQ29 验证刷题效果&#xff0c;输出题目真实通过率 牛客刷题记录表done_questions_record&#xff0c;为验证重复刷题率&#xff0c;需要我们查找一些数据&#xff1a; question_pass_rate 表示每个用户不同题目的通过率&#xff08;同一用户同一题重复提交通过仅计算一次&…

第3讲、Hyper-V 在Windows Server 2012 R2新增特性:

1、新的VHDX&#xff08;Virtual Hard Disk X&#xff09;格式 1&#xff09;打破VHD最大存储能力2TB的限制&#xff0c;VHDX最大可使用64TB虚拟磁盘空间 2&#xff09;VHD扇区大小被限制为512Byte&#xff0c;但VHDX已经改变为支持更加优秀的4KByte 3…

CFLAGS、CXXFLAGS、FFLAGS、FCFLAGS、LDFLAGS、LD_LIBRARY_PATH区别

这些环境变量在编译和链接过程中扮演着重要的角色。下面是对每个环境变量的详细说明及示例&#xff1a; CFLAGS&#xff1a;用于设置C编译器的编译选项。 示例&#xff1a;将优化级别设置为最高&#xff0c;启用所有警告信息&#xff0c;并指定目标体系结构为x86-64。 export C…

企业级自动化测试理论(目标、框架要素、深入理解测试金字塔)

1. 自动化测试的目标 自动化测试的目标是加快研发过程&#xff0c;而不是试图省钱。 迅速检测出新版本中不稳定的变更。 迅速暴露程序回归的错误。 迅速报告问题&#xff0c; 因为这会使程序错误修改更容易。 为了达到目标&#xff0c;所需要的测试能力要求 测试技术&…

YITH WooCommerce Questions and Answers电商网站问答功能高级版

点击阅读YITH WooCommerce Questions and Answers电商网站问答功能高级版原文 YITH WooCommerce Questions and Answers电商网站问答高级版的作用在您的产品页面中构建强大的问答部分&#xff0c;以便您的客户可以找到问题的答案并毫无疑问地购买。 您如何从中受益&#xff1…

Java中富文本转markdown

实现富文本即html语法转md&#xff0c;要求是尽可能展示效果一样&#xff0c;可以有少许误差&#xff0c;另外只实现了html中的body转md&#xff0c;其他标签如head等未实现。 大致思路是&#xff1a;通过jsoup工具获取html节点&#xff0c;再穷举替换。前提是熟悉html以及md语…

Doris 编译错误 error: No best alternative for libs/context/build/asm_sources

错误 error: No best alternative for libs/context/build/asm_sources解决方案 打开 doris/thirdparty/src/boost_1_81_0/libs/context/build/Jamfile.v2 在文件未添加 alias asm_sources: asm/make_arm_aapcs_elf_gas.Sasm/jump_arm_aapcs_elf_gas.Sasm/ontop_arm_aapcs_el…

LabVIEW远程监控

LabVIEW远程监控 远程监控的应用场景 从办公室远程监控工厂车间的测试设备。 在世界另一端的偏远地区监控客户现场的发电设备。 从公司远程监控外场的产品。 技术更新与方法 自2018年以来&#xff0c;NI对基于Web的应用程序支持大幅增长。一些最初的方法&#xff08;如Lab…

【PyTorch】模型的基本操作

文章目录 1. 模型的创建1.1. 创建方法1.1.1. 通过使用模型组件1.1.2. 通过继承nn.Module类 1.2. 将模型转移到GPU 2. 模型参数初始化3. 模型的保存与加载3.1. 只保存参数3.2. 保存模型和参数 1. 模型的创建 1.1. 创建方法 1.1.1. 通过使用模型组件 可以直接使用模型组件快速…

3.镜像加速器

目录 1 阿里云 2 网易云 从网络上拉取镜像的时候使用默认的源可能会慢&#xff0c;用国内的源会快一些 1 阿里云 访问 阿里云-计算&#xff0c;为了无法计算的价值 然后登录&#xff0c;登录后搜索 容器镜像服务 点击容器镜像服务 点击管理控制台 点击 镜像工具->镜像…

【web安全】文件包含漏洞详细整理

前言 菜某的笔记总结&#xff0c;如有错误请指正。 本文用的是PHP语言作为案例 文件包含漏洞的概念 开发者使用include&#xff08;&#xff09;等函数&#xff0c;可以把别的文件中的代码引入当前文件中执行&#xff0c;而又没有对用户输入的内容进行充分的过滤&#xff0…

5G入门到精通 - 5G的十大关键技术

文章目录 一、网络切片二、自组织网络三、D2D技术四、低时延技术五、MIMO技术六、毫米波七、内容分发网络八、M2M技术九、频谱共享十、信息中心网络 一、网络切片 5G中的网络切片是一项关键技术&#xff0c;它允许将整个5G网络分割成多个独立的虚拟网络&#xff0c;每个虚拟网络…

CodeBlocks添加头文件,解决fatal error: ui.h No such file or directory

问题描述 在使用codeblocks工具进行LVGL仿真过程中报错&#xff0c;找不到头文件 原因分析&#xff1a; 没有将头文件加入编辑器搜索的目录中&#xff0c;编译时找不到头文件。 解决方案&#xff1a; 将要包含的头文件的目录加进去就可以了

BCI-Two-streams hypothesis(双流假说)

双流假说 双流假设(Two-stream hypothesis)是关于视觉和听觉神经处理的模型。该假设最初由大卫米尔纳&#xff08;David Milner&#xff09;和梅尔文古德尔&#xff08;Melvyn A. Goodale&#xff09;于1992年的一篇论文中进行了初步描述&#xff0c;认为人类拥有两个独立的视觉…

【爬取音乐,并将音乐信息储存到数据库中】

爬取音乐,并将音乐信息储存到数据库中 确定音乐网站的url并分析网站分析二级页面创建数据库使用Xpath解析&#xff0c;进行多层爬取保存信息完整代码结果 确定音乐网站的url并分析网站 分析二级页面 创建数据库 # 创建一个链接对象 conn pymysql.connect(hostmaster, userroo…

虚拟网络技术:bond技术

网卡bond也称为网卡捆绑&#xff0c;就是将两个或者更多的物理网卡绑定成一个虚拟网卡。 bond的作用&#xff1a; 1.提高网卡的吞吐量 2.增加网络的高可用&#xff0c;实现负载均衡。 一、bond简介 bond技术即bonding&#xff0c;能将多块物理网卡绑定到一块虚拟网卡上&…

六、C语言数组

1. 数组的概念 数组是⼀组相同类型元素的集合&#xff1b;从这个概念中我们就可以发现2个有价值的信息&#xff1a; 数组中存放的是1个或者多个数据&#xff0c;但是数组元素个数不能为0。数组中存放的多个数据&#xff0c;类型是相同的。 数组分为⼀维数组和多维数组&#xf…

Prometheus 发现机制和告警

1.服务发现 Prometheus Server的数据抓取工作于Pull模型&#xff0c;因而&#xff0c;它必需要事先知道各Target的位置&#xff0c;然后才能从相应的Exporter或Instrumentation中抓取数据。在不同的场景下&#xff0c;需要结合不同的机制来实现对应的数据抓取目的。 对于小型的…

企业级 接口自动化测试框架:Pytest+Allure+Excel

1. Allure 简介 简介 Allure 框架是一个灵活的、轻量级的、支持多语言的测试报告工具&#xff0c;它不仅以 Web 的方式展示了简介的测试结果&#xff0c;而且允许参与开发过程的每个人可以从日常执行的测试中&#xff0c;最大限度地提取有用信息。 Allure 是由 Java 语言开发…

基于selenium工具刷b站播放量(请谨慎使用)

基于selenium工具刷b站播放量&#xff08;请谨慎使用&#xff09; from selenium import webdriver import time import random# 打开B站视频 url input("url:") if url "":url https://www.bilibili.com/video/BV1K64y1574T for i in range(50):# 设置…