之前项目还用 jQuery 的时候，要在页面上做一个飘东西效果，类似下雪那样。当时使用的是一个开源组件 jquery.let_it_snow。

当时这个组件只支持掉单张图片，产品要求掉各种东西，于是我 fork 了一下，添加了多图片支持，还好原组件的代码比较容易懂，于是有了 https://github.com/bob-chen/let_it_snow

今年技术栈开始往 Vue 迁移，再使用依赖 jQuery 的组件就不太合适了，所以针对 let_it_snow 这个组件以及日常使用中遇到的一些比较好的实践经验，写了基于 Vue 的 vue-let-it-snow

体验地址是 http://imbeta.cn/demo/vue-let-it-snow/

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 地址： https://github.com/bob-chen/vue-let-it-snow

碎碎念

记录一些所思所想，写写科技与人文，写写生活状态，写写读书心得，主要是扯淡和感悟。欢迎关注，交流。

微信公众号：程序员的诗和远方

公众号ID : MonkeyCoder-Life