你可能會用的上的一個vue功能組件庫，持續完善中...

時間 2019-12-18

標籤可能會用一個 vue 功能組件持續完善简体版

原文原文鏈接

平常開發使用組件庫通常都能知足大部分的需求，不過有些功能組件可能庫裏並無，這裏開源一些特定項目可能會使用到的組件，但願能夠幫助到你們~css

快速上手

安裝

npm i 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)
複製代碼

組件介紹

1、放大鏡 (Magnifier)

組件亮點：

不管組件的dom位置在頁面何方，會準確計算鼠標位置以及自動在右側懸浮一個查看區域，而且當右側位置超過邊界後，查看區域會自動出如今左邊。vue

組件調用：

<magnifier
  :boxSize="400"
  :minImgUrl="require('./img/min.jpg')"
  :maxImgUrl="require('./img/max.jpg')"
></magnifier>
複製代碼

參數：

boxSize: 設置放大鏡主體框的大小，會自動在右側生成一個與之一樣大小的查看放大圖像的懸浮框，默認500。git

minImgUrl: 放大鏡小圖的url。github

maxImgUrl: 放大鏡大圖的url。npm

autoReverse: 是否開啓右側距離超過邊界時，懸浮框自適應在左側。默認true。canvas

direction: 懸浮框的方向，默認right右側。可選left。數組

2、簽到 (CheckIn)

組件亮點：

實現了功能。會將傳入的一維數組的日期集合，按年月格式化爲對象，在渲染某個月時，只會渲染對應當月的簽到天數，數組擁有海量數據也不會大量渲染。緩存

組件調用：安全

<template>
  <checkIn :checkIns="checkIns" />
</template>

export default {
  return {
    checkIns: ['2019-12-15', '2019.12.18', 1576250061182]
  }
}
複製代碼

參數：

checkIns: 傳入一個簽到日期的一維數組集合，能夠是時間戳、2019-11-11、2019.11.11格式。bash

size: 簽到組件的總體大小，默認500，大小自適應。

3、圖片標籤 (ImgLabel)

組件亮點：

實現了功能。右擊建立標籤，雙擊編輯標籤，能夠單個移除，也能夠所有清除，保存到本地緩存，導出爲圖片。

組件調用：

<img-label :src="require('./img/timg.jpg')"></img-label>
複製代碼

參數：

isShowSaveBtn: 是否顯示保存按鈕，默認true，會將標籤數據保存到本地緩存。

src: 須要添加標籤圖片的url。

width：圖片的寬，默認500。

theme: 主題色，默認#3b8bcc。

4、滑動驗證(SlideCheck)

組件亮點：

仿某電商的註冊驗證，不過使用純canvas進行繪製，包括摳出來的拼圖以及圖片的渲染。並且在驗證成功派發的事件裏會記錄用戶滑動過程當中上下分別抖動的最大距離。(可能機器是不會抖的，增長了一點點的安全性)

組件調用：

<slide-check 
  :width="300" 
  :height="300" 
  :src="src" 
  @success="success" 
  @fail="fail">
</slide-check>

export default {
  data() {
    src: [
      require("./img/timg.jpg"),
      require("./img/min.jpg")
    ]
  }
}
複製代碼

參數：

radius: 拼圖突出圓心的半徑值，也就是繪製的拼圖的大小，默認10。

src: 單個url或多個url數組的集合，當爲多個時，驗證失敗或成功都會隨機選擇另一張圖片。

width: 驗證區域的寬，是canvas容器的width。

height: 驗證區域的高。

theme: 主題色，默認#369。

事件：

success: 驗證成功的回調，會派發一個對象出來，分別爲上下波動的最大值。

fail: 驗證沒經過的回調。

5、倒計時(countdown)

組件亮點：

兩種模式，一種是傳入時間戳或2022-5-12-17-20或2022.5.12.17.20這樣大於當前時間的格式。另外一種是傳入60這樣的秒數，開始倒數以後刷新頁面不會從新計時。沒有作任何css的美化，只使用做用域插槽派發出對應的值。

組件使用：

<template>
<div>
  <countdown :time="date">
    <template v-slot="{date}">
      {{date.year}}年-{{date.month}}月-{{date.date}}日-{{date.hours}}小時-{{date.minutes}}分鐘-{{date.seconds}}秒
    </template>
  </countdown>
  <countdown isSMSMode :totalTime="timeLeft">
    <template v-slot="{date}">{{date.timeLeft}}秒</template>
  </countdown>
</div>
</template>

export default {
  data() {
    return {
      date: "2022.11.11",
      timeLeft: 60
    };
  }
複製代碼

參數：

time：傳入大於當前時間的時間格式。

isSMSMode: 是否秒數倒數模式，默認false。

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

做用域插槽

year: 年;

month: 月;

date: 日;

hours: 小時;

minutes: 分鐘;

seconds: 秒鐘;

timeLeft: 倒數剩餘秒數.

事件：

end：倒計時結束。

方法：

start：開始。

pause：暫停。

6、水印(watermark)

指令亮點：

採用自定義指令形式，會將指令做用在img上的標籤最終替換爲canvas標籤。使用離屏canvas進行繪製，一個繪製圖像，另外一個繪製水印，最終合併爲一個canvas標籤。

指令調用：

<template>
  <div>
    <img v-watermark="{src: src, text: 'hello world'}"/>
  </div>
</template>

export default {
  data() {
    return {
      src: require("./img/min.jpg")
    };
  }
}
複製代碼