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,一经查实,立即删除!

相关文章

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;发现重新识别设备了。

【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…

智能优化算法应用:基于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…

配置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…

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

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

数据手册Datasheet解读-MOS管笔记

数据手册Datasheet解读-MOS管笔记 NMOS应用场景一般特征第一个参数Vdss第二、三个参数Rds&#xff08;on&#xff09;、IdMOS管的散热绝对最大额定值第一个参数-Vd第二个参数-Vdgr第三个参数-Vg(栅源电压)第四个参数-Id第五个参数-Idm第六个参数-Ptot第七个参数-Viso第七和八的…

模块四(一):搭建自己的SSR

前言&#xff1a;同构渲染是将服务器渲染和客户端渲染相结合的一种渲染方式&#xff0c;在服务端生成初始页面&#xff0c;提升首屏加载速度&#xff0c;并且有利于SEO&#xff1b;在客户端接管HTML&#xff0c;并且将静态HTML激活为数据绑定的动态HTML&#xff0c;为用户提供更…

Unity 常用资料

1. Layer layer本质是按序左移的一个Int32数字&#xff0c;int32有4个字节》32位&#xff0c;故可以支持32个层级。系统自身使用了5个层&#xff0c;意味着用户还有27个层可以使用。 0000 0000 0000 0000 0000 0000 0000 0000 可以且只能任意位为1。unity具体的0-31的层级分布…

Python实战 | 如何抓取腾讯视频

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 爬虫: 作用: 批量采集数据 / 模拟用户行为 原理: 模拟成 客户端 向 服务器 发送网络请求 环境介绍: python 3.8 解释器 pycharm 编辑器 第三方模块: reques…

委托线程安全

委托线程安全是指将对共享数据的访问委托给线程安全的类&#xff0c;从而避免在调用方代码中进行额外的同步控制。这可以通过将线程安全性限定在一个类内部来实现。以下是一个简单的例子&#xff1a; 假设有一个计数器类 Counter&#xff0c;它不是线程安全的。 public class…

使用git命令行来拉取项目

哈哈哈&#xff0c;在校的我可能更偏向用git&#xff0c;可是在实习过程中大家都用的是图形化工具&#xff0c;因为还不是太熟练&#xff0c;所以我目前还是在用的git命令行。 下边说一下大致流程吧&#xff01; //拉项目 git clone 仓库地址 //根据项目来安装依赖 npm或者y…

公众号提高上限怎么操作?

一般可以申请多少个公众号&#xff1f;众所周知&#xff0c;在2013年前后&#xff0c;公众号申请是不限制数量的&#xff0c;后来企业开始限制申请50个&#xff0c;直到2018年的11月tx又发布&#xff0c;其中个人主体可申请公众号由2个调整为1个&#xff0c;企业主体由50个调整…

CAPL——发送自定义报文

文章目录 一、前言二、CANoe操作二、CAPL程序三、Trace结果一、前言 CAPL是CANoe自带的一个编程语言,基本语法基于C语言,通过CAPL可以发挥CANoe更高效、更强大的功能。CAPL最大的特点就是可以编程灵活的完成报文的发送,报文包括通信报文及诊断报文 本文讲述模拟一个报文周…

腾讯技术工程总结-如何写好技术文章?

文章参考&#xff1a;腾讯技术工程《写好一篇高质量的技术文章》 如何写好技术文章&#xff1f; 大家可以先思考一下&#xff0c;为什么要写技术文章&#xff1f; 我们写技术文章的目的是什么呢&#xff1f;面向哪些人呢&#xff1f; 面向人群 写技术文章的目的毫无疑问是为…