Vue 頁面掉東西組件

以前項目還用 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