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 图没那么流畅):
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…
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
构建之法(第二版)
邹欣 / 人民邮电出版社 / 2015-7 / 59
软件工程牵涉的范围很广, 同时也是一般院校的同学反映比较空洞乏味的课程。 但是软件工程的技术对于投身IT 产业的学生来说是非常重要的。作者邹欣有长达20年的一线软件开发经验,他利用业余时间在数所高校进行了长达6年的软件工程教学实践,总结出了在16周的时间内让同学们通过 “做中学 (Learning By Doing)” 掌握实用的软件工程技术的教学计划,并得到高校师生的积极反馈。在此基础上,作者对......一起来看看 《构建之法(第二版)》 这本书的介绍吧!