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

非常高兴跟大家宣布,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 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架、跨版本的 TinyVue 组件库,包含基于 Angular+TypeScript 的 TinyNG 组件库,拥有灵活扩展的低代码引擎 TinyEngine,具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。


欢迎加入 OpenTiny 开源社区。添加微信小助手:opentiny-official 一起参与交流前端技术~更多视频内容也可关注B站、抖音、小红书、视频号

OpenTiny 也在持续招募贡献者,欢迎一起共建

OpenTiny 官网:https://opentiny.design/

OpenTiny 代码仓库:https://github.com/opentiny/

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

TinyEngine 源码: https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~

如果你也想要共建,可以进入代码仓库,找到 good first issue标签,一起参与开源贡献~

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

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

相关文章

.QT信号槽,如何同步异步?

同步 --- 直连 DirectConnection&#xff08;直连方式&#xff09; 异步 --- 等待连 QueuedConnection&#xff08;排队方式&#xff09; 通常使用的connect&#xff0c;只用了四个参数&#xff0c;实际上最后一个参数使用的是Qt::AutoConnection类型。但如果信号和槽函数是在…

linux 内核同步互斥技术之读写自旋锁

读写自旋锁 读写自旋锁&#xff08;通常简称读写锁&#xff09;是对自旋锁的改进&#xff0c;区分读者和写者&#xff0c;允许多个读者同时进入临界区&#xff0c;读者和写者互斥&#xff0c;写者和写者互斥。 如果读者占有读锁&#xff0c;写者申请写锁的时候自旋等待。如果写…

数据库通用语言DQL-MySQL及语法练习 建议码住,多看几遍!!!!!!!

DQL&#xff08;数据查询语言&#xff09; 语法&#xff1a; SELECT字段列表 FROM表名字段 WHERE条件列表 GROUP BY分组字段列表 HAVING分组后的条件列表 ORDER BY排序字段列表 LIMIT分页参数基础查询 查询多个字段&#xff1a; SELECT 字段1, 字段2, 字段3, ... FROM 表名;…

linux下查看进程资源ulimit

ulimit介绍与使用 ulimit命令用于查看和修改进程的资源限制。下面是ulimit命令的使用方法&#xff1a; 查看当前资源限制&#xff1a; ulimit -a 这将显示当前进程的所有资源限制&#xff0c;包括软限制和硬限制。查看或设置单个资源限制&#xff1a; ulimit -<option> …

喜报丨迪捷软件入选2023年浙江省信息技术应用创新典型案例

12月6日&#xff0c;浙江省经信厅公示了2023年浙江省信息技术应用创新典型案例入围名单。本次案例征集活动&#xff0c;由浙江省经信厅、省密码管理局、工业和信息化部网络安全产业发展中心联合组织开展&#xff0c;共遴选出24个优秀典型解决方案&#xff0c;迪捷软件“基于全数…

安装鸿蒙开发者工具DevEco Studio

1.进入官网下载工具 https://developer.harmonyos.com/cn/develop/deveco-studio/ 选择您电脑对应的系统下载即可 2.安装 很简单直接点击“next”,此处不做赘述 3.配置环境 安装完成后&#xff0c;打开DevEco Studio 会提示配置环境。安装node.js和ohpm 如果不小心关了&a…

DevEco Studio无法识别本地模拟器设备的解决方法

遇到了一个问题&#xff0c;之前测试无误的本地模拟器&#xff0c;运行后设备栏中无法识别了。 此时保持模拟器处于开启状态&#xff0c;关闭DevEco Studio窗口重新启动后&#xff0c;发现重新识别设备了。

Android手机使用Termux终端模拟器

Termux 是 Android 平台上的一个终端模拟器&#xff0c;可以在 Android 手机上模拟 Linux 环境。它提供命令行界面&#xff0c;并且提供了功能健全的包管理工具&#xff08;pkg&#xff09;。另外就是 Termux 不需要 root 权限&#xff0c;安装后默认产生一个用户&#xff0c;可…

【CASS精品教程】cass11提示“请不要在虚拟机中运行此程序”的解决办法

文章目录 一、问题提示二、解决办法一、问题提示 按照正常安装教程安装好南方测绘cass 11之后,打开的时候可能会有以下提示:请不要在虚拟机中运行此程序,如下图所示: 遇到问题,咱们就想办法解决问题,下面将自己尝试的方法及最终解决情况跟大家说一下,供参考。 二、解决…

Linux---压缩和解压缩命令

1. 压缩格式的介绍 Linux默认支持的压缩格式: .gz.bz2.zip 说明: .gz和.bz2的压缩包需要使用tar命令来压缩和解压缩.zip的压缩包需要使用zip命令来压缩&#xff0c;使用unzip命令来解压缩 压缩目的: 节省磁盘空间 2. tar命令及选项的使用 命令说明tar压缩和解压缩命令 …

Linux centos7安装redis 6.2.14 gz并且使用systemctl为开机自启动 / 彻底删除 redis

1.下载 && 减压 wget http://download.redis.io/releases/redis-6.2.14.tar.gz tar -zvxf redis-6.2.14.tar.gz 2.编译&#xff08;分开运行&#xff09; cd redis-6.2.14 make cd src make install 安装目录展示 3.redis.conf 配置更改 daemonize yes supervised s…

广告推广数据流畅,腾讯智能表API无代码集成

简化电商操作&#xff1a;实现无代码API集成 在数字化时代&#xff0c;电商平台需要高效、灵活的工具来简化其业务操作。腾讯文档智能表通过其无代码API连接功能&#xff0c;极大地简化了电商平台与内部系统的集成过程。商家通过几个简单步骤即可实现系统间的数据同步和流转&a…

智能优化算法应用:基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于JAYA算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.JAYA算法4.实验参数设定5.算法结果6.参考文献7.MA…

IDEA配置一个新项目

git clone xxxxx 下载项目主分支 git checkout xxx 切换到需要开发的分支上 配置maven仓库 在File下的Settings中设置maven仓库 配置maven仓库的文件夹 配置好maven后&#xff0c;项目中会出现一个红色的pom.xml文件&#xff0c;右击文件&#xff0c;点击…&#xff0c;pom…

第二十章 : Spring Boot 集成RabbitMQ(四)

第二十章 : Spring Boot 集成RabbitMQ(四) 前言 本章知识点:死信队列的定义、场景、作用以及原理、TTL方法的使用以及演示代码示例。 Springboot 版本 2.3.2.RELEASE ,RabbitMQ 3.9.11,Erlang 24.2死信队列 定义:什么是死信队列? 在RabbitMQ中,并没有提供真正意义…

如何在项目中使用事件对象

了解事件对象 首先&#xff0c;理解事件对象&#xff08;通常在事件处理函数中表示为 e 或 event&#xff09;是理解任何 JavaScript 事件处理的关键。这个对象包含了关于发生事件的所有信息&#xff0c;例如&#xff1a; 哪个元素触发了事件 (e.target)事件的类型&#xff0…

配置Nginx解决跨域问题

Nginx 中将前端请求中的所有以 “/apiUrl” 开头的路径代理到 http://192.12.200.101:9813 例如&#xff1a; /apiUrl/login > http://192.12.200.101:9813/login 配置nginx环境 进入Nginx 的配置文件编辑界面: sudo nano /etc/nginx/conf.d/default.conf开始编辑 defaul…

1. cgal在ubuntu下的安装及Hello World的测试

文章目录 ubuntu下的安装教程 Hello World1 三点一线2 点序列的凸包2.1 内置数组中的点的凸包2.2 向量中点的凸包 3 关于内核和特征类4 概念和模型5 进一步阅读 ubuntu下的安装 CGAL安装 参考地址:https://doc.cgal.org/latest/Manual/usage.html 本在在ubuntu下安装: sudo ap…

gcc介绍

gcc编译有四个步骤&#xff1a;预处理、编译、汇编、链接 前提条件: hello.c 1 预处理 gcc -E hello.c -o hello.i -o 指定输出文件为hello.i 展开宏、头文件&#xff0c;替换条件编译&#xff0c;删除注释、空行、空白 2 gcc -S 编译 gcc -S hello.i -o hello.s 检查语法…

基于Springboot的旅游网站设计与实现(论文+调试+源码)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…