之前專案還用 jQuery 的時候,要在頁面上做一個飄東西效果,類似下雪那樣。當時使用的是一個開源元件 jquery.let_it_snow。
當時這個元件只支援掉單張圖片,產品要求掉各種東西,於是我 fork 了一下,新增了多圖片支援,還好原元件的程式碼比較容易懂,於是有了 github.com/bob-chen/le…
今年技術棧開始往 Vue 遷移,再使用依賴 jQuery 的元件就不太合適了,所以針對 let_it_snow 這個元件以及日常使用中遇到的一些比較好的實踐經驗,寫了基於 Vue 的 vue-let-it-snow
體驗地址是 imbeta.cn/demo/vue-le…
Usage
安裝:
npm install --save vue-let-it-snow
複製程式碼
在 index.js
中應用:
import Vue from `vue`
import LetItSnow from `vue-let-it-snow`;
Vue.use(LetItSnow);
複製程式碼
在某個你想有飄動的元件中,就可以直接用了
<template>
<let-it-snow
v-bind="snowConf"
:show="show"
></let-it-snow>
<template>
複製程式碼
export default {
name: `app`,
data () {
return {
snowConf: {
windPower : 1,
speed : 3,
count : 12,
size : 10,
opacity : 1,
images: [`https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/snow.png`,
`https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/sock.png`,
`https://raw.githubusercontent.com/bob-chen/let_it_snow/master/demo/tree.png`]
},
show: false
}
},
mounted () {
this.show = true
// setTimeout( () => {
// this.show = false
// }, 5000)
// setTimeout( () => {
// this.show = true
// }, 10000)
}
}
複製程式碼
大致效果如下(gif 圖沒那麼流暢):
Props
props
大致和 jQuery 版本的 let_it_snow 差不多,多新增了用來控制顯示隱藏的 show
和多圖片支援的 images
。
Props | Description | Default |
---|---|---|
speed | 掉落速度,可選 0-5 之間的值,越大越快。 | 0 |
interaction | 是否可和掉落的東西互動,注意,如果可以互動會阻擋頁面的內容。 | false |
size | 掉落東西的大小,可選一個數字 0-10+ | 2 |
count | 設定顯示的數量。 | 200 |
opacity | 不用圖片而是模擬雪時,雪的基準透明度。 | 0 |
color | 不用圖片而是模擬雪時,雪的顏色。 | #ffffff |
windPower | 風速,如果想風從左來,設定一個正數,從右來則設定一個負數。 | 0 |
images | 一個掉東西的圖片 url 列表,如果設定了則不使用模擬雪。 | [] |
show | 用來控制這個元件展示還是隱藏。 | false |
其它
第一次發這種單個的 Vue 元件,打包環境還是折騰了一會兒的,網上文章很多,個人還是推薦優先看 Vue 文件中的說明能少走很多彎路:Packaging Vue Components for npm
元件打包是使用了 rollup,需要構建出 umd,esm,min 版本,一般我們專案中 npm install 使用的就是 umd 版本。
Vue 文件裡面只講了打包,實際上我們還需要藉助 webpack 來寫點 demo 驗證寫元件的可用性。這裡也折騰了一會兒,後面考慮把這個做成一個 Yeoman 腳手架會比較方便。
後續考慮是否用 async/await 來保證圖片載入完之後再畫到 canvas 上。
恩,就這麼多 ?
GitHub 地址: github.com/bob-chen/vu…
碎碎念
記錄一些所思所想,寫寫科技與人文,寫寫生活狀態,寫寫讀書心得,主要是扯淡和感悟。
歡迎關注,交流。
微信公眾號:程式設計師的詩和遠方
公眾號ID : MonkeyCoder-Life