Vue 页面掉东西组件

栏目: JavaScript · 发布时间: 6年前

内容简介:之前项目还用 jQuery 的时候,要在页面上做一个飘东西效果,类似下雪那样。当时使用的是一个开源组件当时这个组件只支持掉单张图片,产品要求掉各种东西,于是我 fork 了一下,添加了多图片支持,还好原组件的代码比较容易懂,于是有了今年技术栈开始往 Vue 迁移,再使用依赖 jQuery 的组件就不太合适了,所以针对 let_it_snow 这个组件以及日常使用中遇到的一些比较好的实践经验,写了基于 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 页面掉东西组件

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…


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

菜鸟侦探挑战数据分析

菜鸟侦探挑战数据分析

[日] 石田基广 / 支鹏浩 / 人民邮电出版社 / 2017-1 / 42

本书以小说的形式展开,讲述了主人公俵太从大学文科专业毕业后进入征信所,从零开始学习数据分析的故事。书中以主人公就职的征信所所在的商业街为舞台,选取贴近生活的案例,将平均值、t检验、卡方检验、相关、回归分析、文本挖掘以及时间序列分析等数据分析的基础知识融入到了生动有趣的侦探故事中,讲解由浅入深、寓教于乐,没有深奥的理论和晦涩的术语,同时提供了大量实际数据,使用免费自由软件RStudio引领读者进一步......一起来看看 《菜鸟侦探挑战数据分析》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具