vue-gn-components：开源特定项目可能用到的功能组件库

【Github】项目名：vue-gn-components：开源特定项目可能用到的功能组件库

项目简介

日常开发使用组件库一般能满足大部分需求，但有些功能组件可能未被包含。此项目开源了一些特定项目可能会用到的组件，如放大镜、签到、图片标签、滑动验证、倒计时、水印、拖拽、大家来找茬等组件。

快速上手

安装：可以使用npm install vue-gn-components。引入方式有整体引入和按需引入。整体引入：import VueGnComponents from “vue-gn-components”;import “vue-gn-components/lib/style/index.css”;Vue.use(VueGnComponents)。按需引入：import {CheckIn, watermark} from “vue-gn-components”;import “vue-gn-components/lib/style/index.css”;Vue.use(CheckIn).use(watermark)。

组件介绍

放大镜(Magnifier)组件

安装：import {Magnifier} from ‘vue-gn-components’;Vue.use(Magnifier)。亮点为无论组件的dom位置在页面何方，会准确计算鼠标位置以及自动在右侧悬浮一个查看区域，并且当右侧位置超过边界后，查看区域会自动出现在左边。调用：<magnifier:boxSize=”400″:minImgUrl=”require(‘./img/min.jpg’)”:maxImgUrl=”require(‘./img/max.jpg’)”></magnifier>，参数有boxSize（设置放大镜主体框的大小，默认500）、minImgUrl（放大镜小图的url）、maxImgUrl（放大镜大图的url）、autoReverse（是否开启右侧距离超过边界时，悬浮框自适应在左侧，默认true）、direction（悬浮框的方向，默认right右侧，可选left）。

签到(CheckIn)组件

安装：import {CheckIn} from ‘vue-gn-components’;Vue.use(CheckIn)。亮点是会将传入的一维数组的日期集合，按年月格式化为对象，在渲染某个月时，只会渲染对应当月的签到天数，数组拥有海量数据也不会大量渲染。调用：<template><check-in:checkIns=”checkIns”/></template>，参数checkIns为传入一个签到日期的一维数组集合，可以是时间戳、2019-11-11、2019.11.11格式，还有size（签到组件的整体大小，默认500，大小自适应）。

图片标签(ImgLabel)组件

安装：import {ImgLabel} from ‘vue-gn-components’;Vue.use(ImgLabel)。亮点为右击创建标签，双击编辑标签，可以单个移除，也可以全部清除，保存到本地缓存，导出为图片。调用：<img-label:src=”require(‘./img/timg.jpg’)”></img-label>，参数有isShowSaveBtn（是否显示保存按钮，默认true，会将标签数据保存到本地缓存）、src（需要添加标签图片的url）、width（图片的宽，默认500）、theme（主题色，默认#3b8bcc）。

滑动验证(SlideCheck)组件

安装：import {SlideCheck} from ‘vue-gn-components’;Vue.use(SlideCheck)。亮点是仿某电商的注册验证，使用纯canvas进行绘制，包括抠出来的拼图以及图片的渲染，且在验证成功派发的事件里会记录用户滑动过程中上下分别抖动的最大距离。调用：<slide-check:width=”300″:height=”300″:src=”src”@success=”success”@fail=”fail”></slide-check>，参数有radius（拼图突出圆心的半径值，也就是绘制的拼图的大小，默认10）、src（单个url或多个url数组的集合，当为多个时，验证失败或成功都会随机选择另外一张图片）、width（验证区域的宽，是canvas容器的width）、height（验证区域的高）、theme（主题色，默认#369），事件有success（验证成功的回调，会派发一个对象出来，分别为上下波动的最大值）、fail（验证没通过的回调）。

倒计时(Countdown)组件

安装：import {Countdown} from ‘vue-gn-components’;Vue.use(Countdown)。亮点为两种模式，一种是传入时间戳或2022-5-12-17-20或2022.5.12.17.20这样大于当前时间的格式，另一种是传入60这样的秒数，开始倒数之后刷新页面不会重新计时，没有做任何css的美化，只使用作用域插槽派发出对应的值。使用：<template><div><countdown:time=”date”><templatev-slot=”{date}”>{{date.year}}年-{{date.month}}月-{{date.date}}日-{{date.hours}}小时-{{date.minutes}}分钟-{{date.seconds}}秒</template></countdown><countdownisSMSMode:totalTime=”timeLeft”><templatev-slot=”{date}”>{{date.timeLeft}}秒</template></countdown></div></template>，参数有time（传入大于当前时间的时间格式）、isSMSMode（是否秒数倒数模式，默认false）、totalTime（倒数模式的最大秒数），作用域插槽有year、month、date、hours、minutes、seconds、timeLeft，事件有end（倒计时结束），方法有start（开始）、pause（暂停）。

水印(watermark)组件

安装：import {watermark} from ‘vue-gn-components’;Vue.use(watermark)。采用自定义指令形式，会将指令作用在img上的标签最终替换为canvas标签，使用离屏canvas进行绘制，一个绘制图像，另一个绘制水印，最终合并为一个canvas标签。调用：<template><div><imgv-watermark=”{src:src,text:’helloworld’}”/></div></template>，参数有src（图片的url）、text（水印的文字）、opacity（水印的透明度，默认0.3）、rotate（旋转角度，默认20）、fontSize（水印字体大小，默认20）、type（水印绘制的方式，默认是repeat全屏重复绘制，只绘制一条水印时，可选left-top左上，right-top右上，right-bottom右小，left-bottom左下）。

拖拽组件(DragWrap/DragItem)组件

安装：import {DragWrap,DragItem} from ‘vue-gn-components’;Vue.use(DragWrap).use(DragItem)。亮点为拖拽的具体内容用户完全可以自己编写，也可以自己编写拖拽的控制点。调用：<template><drag-wrapclass=”wrap”:data=”list”@watchData=”watchData”><drag-itemclass=”item”v-for=”(item,index)inlist”:key=”index”><template#drag><div>拖拽Dom</div></template><div>{{item}}</div></drag-item></drag-wrap></template>，参数有data（数组格式，Dom有对应的渲染数组，当Dom位置变了之后，数组也会发生变化，传递给组件内，改变后组件派发出来），事件有watchData（会将改变的数组派发出来，监听这个方法接收），插槽有drag（用户自己定义拖拽的控制点，没有时拖拽Dom项任意任意位置都可以）。

找茬组件(FindDiff)组件

安装：import {FindDiff} from ‘vue-gn-components’;Vue.use(FindDiff)。亮点为辅助完成大家来找茬游戏。调用：<template><find-diff/></template>。

项目总结

该项目提供了多种独特功能的组件，且后续还会持续添加以及优化组件。如果这个项目对你有帮助，欢迎给个Star。同时也欢迎大家进行pr。期待大家在评论区留言，一起讨论关于这个项目的相关话题。

项目地址

GitHub链接直达