你可能会用的上的一个vue功能组件库，持续完善中...

Posted 2023-03-13

参考技术A 日常开发使用组件库一般都能满足大部分的需求，不过有些功能组件可能库里并没有，这里开源一些特定项目可能会使用到的组件，希望可以帮助到大家~

无论组件的 dom 位置在页面何方，会准确计算鼠标位置以及自动在右侧悬浮一个查看区域，并且当右侧位置超过边界后，查看区域会自动出现在左边。

boxSize : 设置放大镜主体框的大小，会自动在右侧生成一个与之同样大小的查看放大图像的悬浮框，默认500。

minImgUrl : 放大镜小图的 url 。

maxImgUrl : 放大镜大图的 url 。

autoReverse : 是否开启右侧距离超过边界时，悬浮框自适应在左侧。默认 true 。

direction : 悬浮框的方向，默认 right 右侧。可选 left 。

实现了功能。会将传入的一维数组的日期集合，按年月格式化为对象，在渲染某个月时，只会渲染对应当月的签到天数，数组拥有海量数据也不会大量渲染。

组件调用：

checkIns : 传入一个签到日期的一维数组集合，可以是时间戳、 2019-11-11 、 2019.11.11 格式。

size : 签到组件的整体大小，默认 500 ，大小自适应。

实现了功能。右击创建标签，双击编辑标签，可以单个移除，也可以全部清除，保存到本地缓存，导出为图片。

isShowSaveBtn : 是否显示保存按钮，默认 true ，会将标签数据保存到本地缓存。

src : 需要添加标签图片的 url 。

width ：图片的宽，默认500。

theme : 主题色，默认 #3b8bcc 。

仿某电商的注册验证，不过使用纯 canvas 进行绘制，包括抠出来的拼图以及图片的渲染。而且在验证成功派发的事件里会记录用户滑动过程中上下分别抖动的最大距离。(可能机器是不会抖的，增加了一点点的安全性)

radius : 拼图突出圆心的半径值，也就是绘制的拼图的大小，默认 10 。

src : 单个 url 或多个 url 数组的集合，当为多个时，验证失败或成功都会随机选择另外一张图片。

width : 验证区域的宽，是 canvas 容器的 width 。

height : 验证区域的高。

theme : 主题色，默认 #369 。

success : 验证成功的回调，会派发一个对象出来，分别为上下波动的最大值。

fail : 验证没通过的回调。

两种模式，一种是传入时间戳或 2022-5-12-17-20 或 2022.5.12.17.20 这样大于当前时间的格式。另一种是传入 60 这样的秒数，开始倒数之后刷新页面不会重新计时。没有做任何 css 的美化，只使用作用域插槽派发出对应的值。

time ： 传入大于当前时间的时间格式。

isSMSMode : 是否秒数倒数模式，默认 false 。

totalTime : 倒数模式的最大秒数。

year : 年;

month : 月;

date : 日;

hours : 小时;

minutes : 分钟;

seconds : 秒钟;

timeLeft : 倒数剩余秒数.

end ：倒计时结束。

start ：开始。

pause ：暂停。

采用自定义指令形式，会将指令作用在 img 上的标签最终替换为 canvas 标签。使用离屏 canvas 进行绘制，一个绘制图像，另一个绘制水印，最终合并为一个 canvas 标签。

src : 图片的 url 。

text : 水印的文字。

opacity : 水印的透明度，默认 0.3 。

rotate : 旋转角度，默认 20 。

fontSize : 水印字体大小，默认 20 。

type : 水印绘制的方式，默认是 repeat 全屏重复绘制。只绘制一条水印时，可选 left-top 左上， right-top 右上， right-bottom 右小， left-bottom 左下。

拖拽的具体内容用户完全可以自己编写，也可以自己编写拖拽的控制点。

data ：数组格式， Dom 有对应的渲染数组，当 Dom 位置变了之后，数组也会发生变化，传递给组件内，改变后组件派发出来。

watchData ：会将改变的数组派发出来，监听这个方法接收。

drag ：用户自己定义拖拽的控制点，没有时拖拽 Dom 项任意任意位置都可以。

'辅助'完成大家来找茬游戏。

更多的组件后续会持续添加以及优化，欢迎 pr 各种你使用到功能组件。源码地址 vue-gn-components ，如果对你有帮助，还请给个 Star 了，这也是我持续完善这个项目，持续的动力。