Vue 頁面掉東西元件

Bob-Chen發表於2019-03-03

之前專案還用 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

程式設計師的詩和遠方

相關文章