日常开发中使用的组件库一般可以满足大部分需求，但是有些功能组件可能库里没有，这里具体介绍一下开源了项目中可能用到的组件，希望对大家有所帮助~快速安装npmivue-gn-components导入整体导入：importVueGnComponentsfrom"vue-gn-components";import"vue-gn-components/lib/style/index.css";Vue.use(VueGnComponents)按需导入：import{CheckIn,watermark}from"vue-gn-components";导入“vue-gn-components/lib/style/index.css”；看。use(CheckIn).use(watermark)组件介绍1.放大镜（Magnifier）组件安装：import{Magnifier}from'vue-gn-components';Vue.use(Magnifier)组件高亮：无论组件的dom位置在页面的哪个位置，都会准确计算鼠标位置并自动在右侧浮动一个可视区域，当右侧位置超出边界时，查看区域将自动出现在左侧。组件调用：参数：boxSize：设置放大镜主框的大小，右侧会自动生成一个相同大小的用于查看放大图的浮动框，默认为500。minImgUrl：小图的url的放大镜。maxImgUrl：放大镜图片的url。autoReverse：当右侧距离超出边界时，是否开启浮动框自适应左侧。默认为真。direction：浮动框的方向，默认为右。可选左侧。2.签入（CheckIn）组件安装：import{CheckIn}from'vue-gn-components';Vue.use(CheckIn)组件亮点：功能实现。传入的一维数组的日期集合会按年月格式化为一个对象。渲染某月时，只会渲染该月对应的入住天数，数组数据量大时不会渲染大量数据。组件调用：exportdefault{return{checkIns:['2019-12-15','2019.12.18',1576250061182]}}参数：checkIns：传入签到日期的一维数组集合，格式可以是时间戳，2019-11-11，2019.11.11。size：签到组件整体大小，默认500，大小自适应。3、图片标签（ImgLabel）组件安装：import{ImgLabel}from'vue-gn-components';Vue.use(ImgLabel)组件亮点：功能已经实现。右键创建标签，双击编辑标签，可以一个一个删除，也可以全部清除，保存到本地缓存，导出为图片。组件调用：参数：isShowSaveBtn：是否显示保存按钮，默认为true，标签数据将保存在本地缓存中。src：需要添加到标签中的图片的url。width：图片的宽度，默认500。theme：主题颜色，默认#3b8bcc。4.安装幻灯片检查（SlideCheck）组件：import{SlideCheck}from'vue-gn-components';Vue.use(SlideCheck)组件亮点：模仿电商注册验证，但是使用纯canvas进行绘图，包括裁剪拼图和图片渲染。并且，在验证发送成功的情况下，用户在滑动过程中上下晃动的最大距离会被记录下来。（可能机器不会晃动，增加一点安全感）组件调用：exportdefault{data(){src:[require("./img/timg.jpg"),require("./img/min.jpg")]}}参数：radius：拼图突出中心的半径值，即绘制的拼图大小，默认为10。src：单个url或多个url数组的集合。当有多个url时，如果验证失败或成功，将随机选择另一张图片。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美化，只使用scopeslot来dispatch对应的值。组件用法：{{date.year}}-{{date.month}}month-{{date.date}}day-{{date.hours}}hour-{{date.minutes}}minute-{{date.seconds}}second{{date.timeLeft}}seconds
exportdefault{data(){return{date:"2022.11.11",剩余时间:60};}参数：time：传入大于当前时间的时间格式。isSMSMode：是否为秒数倒计时模式，默认为false。totalTime：倒计时模式的最大秒数。范围槽年份：年份；月份：月份；日期：日；小时：小时；分钟：分钟；秒：秒；timeLeft：倒计时剩余秒数。事件：结束：倒计时结束。方法：开始：开始。暂停：暂停。6.Watermark（水印）组件安装：import{watermark}from'vue-gn-components';vue.use(watermark)指令高亮：采用自定义指令的形式，将img上的label替换为canvas的Label。使用离屏canvas进行绘制，一个绘制图片，一个绘制水印，最后合并为一个canvas标签。命令调用：exportdefault{data(){return{src:require("./img/min.jpg")};}}命令参数：src：图片的URL。text：水印的文本。opacity：水印的透明度，默认0.3。rotate：旋转角度，默认20。fontSize：水印字体大小，默认20。type：水印绘制方式，默认为repeat全屏重复绘制。只绘制一个水印时，左上选择左上，右上选择右上，小右选择右下，左下选择左下。未来会不断添加和优化越来越多的组件。欢迎您发布您使用的各种功能组件。如果对您有帮助，请给个star。这也是我继续完善这个项目的动力。源码地址下方是项目的github地址。移动端看不到，PC端可以看到~vue-gn-components
