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