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

飛躍瘋人院發表於2019-12-15
Vue元件

日常開發使用元件庫一般都能滿足大部分的需求，不過有些功能元件可能庫裡並沒有，這裡開源一些特定專案可能會使用到的元件，希望可以幫助到大家~

快速上手

  • 安裝
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)
複製程式碼

元件介紹

一、放大鏡 (Magnifier)

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

  • 元件安裝:
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)

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

  • 元件安裝:
import { CheckIn } from 'vue-gn-components';
Vue.use(CheckIn)
複製程式碼
  • 元件亮點：

實現了功能。會將傳入的一維陣列的日期集合，按年月格式化為物件，在渲染某個月時，只會渲染對應當月的簽到天數，陣列擁有海量資料也不會大量渲染。

元件呼叫：

<template>
  <check-in :checkIns="checkIns" />
</template>

export default {
  return {
    checkIns: ['2019-12-15', '2019.12.18', 1576250061182]
  }
}
複製程式碼
  • 引數：

checkIns: 傳入一個簽到日期的一維陣列集合，可以是時間戳、2019-11-11、2019.11.11格式。

size: 簽到元件的整體大小，預設500，大小自適應。

三、圖片標籤 (ImgLabel)

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

  • 元件安裝:
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)

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

  • 元件安裝:
import { SlideCheck } from 'vue-gn-components';
Vue.use(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: 驗證沒通過的回撥。

五、倒數計時(Countdown)

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

  • 元件安裝:
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">
    <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：暫停。

六、水印(watermark)

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

  • 元件安裝:
import { watermark } from 'vue-gn-components';
Vue.use(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")
    };
  }
}
複製程式碼
  • 指令引數：

src: 圖片的url。

text: 水印的文字。

opacity: 水印的透明度，預設0.3。

rotate: 旋轉角度，預設20。

fontSize: 水印字型大小，預設20。

type: 水印繪製的方式，預設是repeat全屏重複繪製。只繪製一條水印時，可選left-top左上，right-top右上，right-bottom右小，left-bottom左下。

七、拖拽元件(DragWrap/DragItem)

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

  • 元件安裝:
import { DragWrap, DragItem } from 'vue-gn-components';
Vue.use(DragWrap).use(DragItem)
複製程式碼
  • 元件亮點：

拖拽的具體內容使用者完全可以自己編寫，也可以自己編寫拖拽的控制點。

  • 元件呼叫：
<template>
  <drag-wrap class="wrap" :data="list" @watchData="watchData">
    <drag-item class="item" v-for="(item, index) in list" :key="index">
      <template #drag>
        <div>拖拽Dom</div>
      </template>
      <div>{{item}}</div>
    </drag-item>
  </drag-wrap>
</template>

export default {
  data() {
    return {
      list: [111, 222, 333, 444, 555, 666, 777, 888, 999]
    };
  },
  methods: {
    watchData(newList) {
      console.log("newList", newList);
    }
  }
}
複製程式碼
  • 引數：

data：陣列格式，Dom有對應的渲染陣列，當Dom位置變了之後，陣列也會發生變化，傳遞給元件內，改變後元件派發出來。

  • 事件：

watchData：會將改變的陣列派發出來，監聽這個方法接收。

  • 插槽：

drag：使用者自己定義拖拽的控制點，沒有時拖拽Dom項任意任意位置都可以。

八、找茬元件(FindDiff)

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

  • 元件安裝:
import { FindDiff } from 'vue-gn-components';
Vue.use(FindDiff)
複製程式碼
  • 元件亮點：

'輔助'完成大家來找茬遊戲。

  • 元件呼叫：
<template>
  <find-diff/>
</template>
複製程式碼

更多

更多的元件後續會持續新增以及優化，歡迎pr各種你使用到功能元件。原始碼地址 vue-gn-components，如果對你有幫助，還請給個Star了，這也是我持續完善這個專案，持續的動力。

相關文章