日常開發(fā)使用組件庫一般都能滿足大部分的需求肌毅，不過有些功能組件可能庫里并沒有筷转，這里開源一些特定項(xiàng)目可能會(huì)使用到的組件姑原，希望可以幫助到大家~
快速上手
- 安裝
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)
- 組件安裝:
import { Magnifier } from 'vue-gn-components';
Vue.use(Magnifier)
- 組件亮點(diǎn)：
無論組件的dom位置在頁面何方呜舒，會(huì)準(zhǔn)確計(jì)算鼠標(biāo)位置以及自動(dòng)在右側(cè)懸浮一個(gè)查看區(qū)域锭汛，并且當(dāng)右側(cè)位置超過邊界后，查看區(qū)域會(huì)自動(dòng)出現(xiàn)在左邊袭蝗。
- 組件調(diào)用：
<magnifier
:boxSize="400"
:minImgUrl="require('./img/min.jpg')"
:maxImgUrl="require('./img/max.jpg')"
></magnifier>
- 參數(shù)：
boxSize: 設(shè)置放大鏡主體框的大小唤殴，會(huì)自動(dòng)在右側(cè)生成一個(gè)與之同樣大小的查看放大圖像的懸浮框，默認(rèn)500到腥。
minImgUrl: 放大鏡小圖的url朵逝。
maxImgUrl: 放大鏡大圖的url。
autoReverse: 是否開啟右側(cè)距離超過邊界時(shí)乡范，懸浮框自適應(yīng)在左側(cè)配名。默認(rèn)true啤咽。
direction: 懸浮框的方向，默認(rèn)right右側(cè)渠脉∮钫可選left。
二芋膘、簽到 (CheckIn)
- 組件安裝:
import { CheckIn } from 'vue-gn-components';
Vue.use(CheckIn)
- 組件亮點(diǎn)：
實(shí)現(xiàn)了功能鳞青。會(huì)將傳入的一維數(shù)組的日期集合，按年月格式化為對(duì)象为朋，在渲染某個(gè)月時(shí)臂拓，只會(huì)渲染對(duì)應(yīng)當(dāng)月的簽到天數(shù)，數(shù)組擁有海量數(shù)據(jù)也不會(huì)大量渲染习寸。
組件調(diào)用：
<template>
<check-in :checkIns="checkIns" />
</template>
export default {
return {
checkIns: ['2019-12-15', '2019.12.18', 1576250061182]
}
}
- 參數(shù)：
checkIns: 傳入一個(gè)簽到日期的一維數(shù)組集合埃儿，可以是時(shí)間戳、2019-11-11融涣、2019.11.11格式童番。
size: 簽到組件的整體大小，默認(rèn)500威鹿，大小自適應(yīng)剃斧。
三、圖片標(biāo)簽 (ImgLabel)
- 組件安裝:
import { ImgLabel } from 'vue-gn-components';
Vue.use(ImgLabel)
- 組件亮點(diǎn)：
實(shí)現(xiàn)了功能忽你。右擊創(chuàng)建標(biāo)簽幼东，雙擊編輯標(biāo)簽，可以單個(gè)移除科雳，也可以全部清除根蟹，保存到本地緩存，導(dǎo)出為圖片糟秘。
- 組件調(diào)用：
<img-label :src="require('./img/timg.jpg')"></img-label>
- 參數(shù)：
isShowSaveBtn: 是否顯示保存按鈕简逮，默認(rèn)true，會(huì)將標(biāo)簽數(shù)據(jù)保存到本地緩存尿赚。
src: 需要添加標(biāo)簽圖片的url散庶。
width：圖片的寬，默認(rèn)500凌净。
theme: 主題色悲龟，默認(rèn)#3b8bcc。
四冰寻、滑動(dòng)驗(yàn)證(SlideCheck)
- 組件安裝:
import { SlideCheck } from 'vue-gn-components';
Vue.use(SlideCheck)
- 組件亮點(diǎn)：
仿某電商的注冊驗(yàn)證须教，不過使用純canvas進(jìn)行繪制，包括摳出來的拼圖以及圖片的渲染斩芭。而且在驗(yàn)證成功派發(fā)的事件里會(huì)記錄用戶滑動(dòng)過程中上下分別抖動(dòng)的最大距離轻腺。(可能機(jī)器是不會(huì)抖的羹奉，增加了一點(diǎn)點(diǎn)的安全性)
- 組件調(diào)用：
<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")
]
}
}
- 參數(shù)：
radius: 拼圖突出圓心的半徑值，也就是繪制的拼圖的大小约计，默認(rèn)10诀拭。
src: 單個(gè)url或多個(gè)url數(shù)組的集合，當(dāng)為多個(gè)時(shí)煤蚌，驗(yàn)證失敗或成功都會(huì)隨機(jī)選擇另外一張圖片耕挨。
width: 驗(yàn)證區(qū)域的寬，是canvas容器的width尉桩。
height: 驗(yàn)證區(qū)域的高筒占。
theme: 主題色，默認(rèn)#369蜘犁。
- 事件：
success: 驗(yàn)證成功的回調(diào)翰苫，會(huì)派發(fā)一個(gè)對(duì)象出來，分別為上下波動(dòng)的最大值这橙。
fail: 驗(yàn)證沒通過的回調(diào)奏窑。
五、倒計(jì)時(shí)(Countdown)
- 組件安裝:
import { Countdown } from 'vue-gn-components';
Vue.use(Countdown)
- 組件亮點(diǎn)：
兩種模式屈扎，一種是傳入時(shí)間戳或2022-5-12-17-20或2022.5.12.17.20這樣大于當(dāng)前時(shí)間的格式埃唯。另一種是傳入60這樣的秒數(shù)，開始倒數(shù)之后刷新頁面不會(huì)重新計(jì)時(shí)鹰晨。沒有做任何css的美化墨叛，只使用作用域插槽派發(fā)出對(duì)應(yīng)的值。
- 組件使用：
<template>
<div>
<countdown :time="date">
<template v-slot="{date}">
{{date.year}}年-{{date.month}}月-{{date.date}}日-{{date.hours}}小時(shí)-{{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
};
}
- 參數(shù)：
time： 傳入大于當(dāng)前時(shí)間的時(shí)間格式模蜡。
isSMSMode: 是否秒數(shù)倒數(shù)模式漠趁，默認(rèn)false。
totalTime: 倒數(shù)模式的最大秒數(shù)忍疾。
- 作用域插槽
year: 年;
month: 月;
date: 日;
hours: 小時(shí);
minutes: 分鐘;
seconds: 秒鐘;
timeLeft: 倒數(shù)剩余秒數(shù).
- 事件：
end：倒計(jì)時(shí)結(jié)束闯传。
- 方法：
start：開始。
pause：暫停膝昆。
六丸边、水印(watermark)
- 組件安裝:
import { watermark } from 'vue-gn-components';
Vue.use(watermark)
- 指令亮點(diǎn)：
采用自定義指令形式，會(huì)將指令作用在img上的標(biāo)簽最終替換為canvas標(biāo)簽荚孵。使用離屏canvas進(jìn)行繪制，一個(gè)繪制圖像纬朝，另一個(gè)繪制水印收叶，最終合并為一個(gè)canvas標(biāo)簽。
- 指令調(diào)用：
<template>
<div>
<img v-watermark="{src: src, text: 'hello world'}"/>
</div>
</template>
export default {
data() {
return {
src: require("./img/min.jpg")
};
}
}
- 指令參數(shù)：
src: 圖片的url共苛。
text: 水印的文字判没。
opacity: 水印的透明度蜓萄，默認(rèn)0.3。
rotate: 旋轉(zhuǎn)角度澄峰，默認(rèn)20嫉沽。
fontSize: 水印字體大小，默認(rèn)20俏竞。
type: 水印繪制的方式绸硕，默認(rèn)是repeat全屏重復(fù)繪制。只繪制一條水印時(shí)魂毁，可選left-top左上玻佩，right-top右上，right-bottom右小席楚，left-bottom左下咬崔。
七、拖拽組件(DragWrap/DragItem)
- 組件安裝:
import { DragWrap, DragItem } from 'vue-gn-components';
Vue.use(DragWrap).use(DragItem)
- 組件亮點(diǎn)：
拖拽的具體內(nèi)容用戶完全可以自己編寫烦秩，也可以自己編寫拖拽的控制點(diǎn)垮斯。
- 組件調(diào)用：
<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);
}
}
}
- 參數(shù)：
data：數(shù)組格式，Dom有對(duì)應(yīng)的渲染數(shù)組只祠，當(dāng)Dom位置變了之后甚脉，數(shù)組也會(huì)發(fā)生變化，傳遞給組件內(nèi)铆农，改變后組件派發(fā)出來牺氨。
- 事件：
watchData：會(huì)將改變的數(shù)組派發(fā)出來，監(jiān)聽這個(gè)方法接收墩剖。
- 插槽：
drag：用戶自己定義拖拽的控制點(diǎn)猴凹，沒有時(shí)拖拽Dom項(xiàng)任意任意位置都可以。
八岭皂、找茬組件(FindDiff)
- 組件安裝:
import { FindDiff } from 'vue-gn-components';
Vue.use(FindDiff)
- 組件亮點(diǎn)：
'輔助'完成大家來找茬游戲郊霎。
- 組件調(diào)用：
<template>
<find-diff/>
</template>
更多
更多的組件后續(xù)會(huì)持續(xù)添加以及優(yōu)化，歡迎pr各種你使用到功能組件爷绘。源碼地址 vue-gn-components书劝，如果對(duì)你有幫助，還請給個(gè)Star了土至，這也是我持續(xù)完善這個(gè)項(xiàng)目购对，持續(xù)的動(dòng)力。
