Vue 頁面掉東西元件

Bob-Chen發表於2019-03-03
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 圖沒那麼流暢）：

Vue 頁面掉東西元件 - bob.chen

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

程式設計師的詩和遠方

相關文章