代码链接:https://github.com/zhangKunUserGit/vue-component

效果图:

大家可以在线运行: https://zhangkunusergit.github.io/vue-component/dist/btnRipple.html 看看效果(一定要狠狠的点击哦)。

先说一下用法:

<zk-button class="btn btn-default">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round">默认按钮</zk-button>
<zk-button class="btn btn-default btn-round" :speed="" :opacity="0.6">定义速度和初始的波浪透明度</zk-button>

原理:

这里用的是canvas + requestAnimationFrame(兼容性可以网上找一下解决方法) 绘制的波纹,有些用的是css transform + setTimeout做的,我感觉不太好。

模板(template):

<template>
<button class="zk-btn">
<canvas class="zk-ripple" @click="ripple"></canvas>
<slot></slot>
</button>
</template>

点击代码如下(我已经加入详细的注释)

ripple(event) {
// 清除上次没有执行的动画
if (this.timer) {
window.cancelAnimationFrame(this.timer);
}
this.el = event.target;
// 执行初始化
if (!this.initialized) {
this.initialized = true;
this.init(this.el);
}
this.radius = 0;
// 点击坐标原点
this.origin.x = event.offsetX;
this.origin.y = event.offsetY;
this.context.clearRect(0, 0, this.el.width, this.el.height);
this.el.style.opacity = this.opacity;
this.draw();
},

这里主要初始化canvas和获取用户点击的位置坐标,并开始绘制。

循环绘制 

draw() {
this.context.beginPath();
// 绘制波纹
this.context.arc(this.origin.x, this.origin.y, this.radius, 0, 2 * Math.PI, false);
this.context.fillStyle = this.color;
this.context.fill();
// 定义下次的绘制半径和透明度
this.radius += this.speed;
this.el.style.opacity -= this.speedOpacity;
// 通过判断半径小于元素宽度或者还有透明度,不断绘制圆形
if (this.radius < this.el.width || this.el.style.opacity > 0) {
this.timer = window.requestAnimationFrame(this.draw);
} else {
// 清除画布
this.context.clearRect(0, 0, this.el.width, this.el.height);
this.el.style.opacity = 0;
}
}

总结:

上面代码我没有复制完整,大家想看源码可以下载看一下

这是4月最后一天上班了,5.1要好好休息一下。

Vue 波纹按钮组件的更多相关文章

  1. 自己开发的 vue 滑动按钮组件 vue-better-slider

    写在前面的 这个人第一次尝试开发并发布一个 vue 的组件,该组件实现了类似 ios 手机淘宝客户端 -> 消息界面中消息的滑动删除功能等,如下为该组件的文档. 一个 Vue 的滑动按钮组件,有 ...

  2. 一个 Vue 的滑动按钮组件

    git 地址:https://github.com/SyMind/vue-sliding-button vue-better-slider 一个 Vue 的滑动按钮组件,有关滑动方面的处理借鉴 bet ...

  3. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  4. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  5. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  6. vue.js之组件(上篇)

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  7. 看JQ时代过来的前端,如何转换思路用Vue打造选项卡组件

    前言 在Vue还未流行的时候,我们都是用JQuery来封装一个选项卡插件,如今Vue当道,让我们一起来看看从JQ时代过来的前端是如何转换思路,用数据驱动DOM的思想打造一个Vue选项卡组件. 接下来, ...

  8. vue的常用组件方法应用

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

  9. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

随机推荐

  1. 测试驱动开发实践4————testSave之新增文档分类

    [内容指引] 1.确定"新增文档分类"的流程及所需的参数 2.根据业务规则设计测试用例 3.为测试用例赋值并驱动开发 一.确定"新增文档分类"的流程及所需的参数 ...

  2. Git撤销commit消息保留修改

    有时候commit后发现commit信息错了或者是添加了不想commit的内容,但还没有push到远程仓库 这个时候 git reset --soft [commit_id] 就可以回滚到某一个com ...

  3. jacascript DOM节点——节点获取与选择器API

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! DOM 操作必须等待 HTML 加载完毕之后,才可以获取节点:有两种方法: 把 script 标签放到代码 ...

  4. JavaScript, 函数是实现异步的基础

    昨天一朋友和我聊到JS中的异步和同步, 后来从异步和同步的问题中得出了函数的另一面, 觉得挺不错, 特此分享一下 ==== 追梦子: 聊天是同步还是异步 小A: 异步 小A: 和你聊还可以和别人聊 追 ...

  5. laravel5.5 使用alipay SDK报错Cannot redeclare Encrypt() (previously declared in ../vendor/laravel/framework/src/Illuminate/Foundation/helpers.php:448)

    错误现象: 在laravel5.5 中,使用alipaySDK 报错: Cannot redeclare Encrypt() (previously declared in ../vendor/lar ...

  6. 开发一个成功APP的六个技巧

    越来越多的人开始使用智能手机,平板电脑或其他的移动设备.出于这个原因,移动APP开发已成为当今软件开发中增长最快的领域之一.本文提供九个简单而有效的提示,可帮助您规划和实施成功的移动APP. 1.目标 ...

  7. 微信小程序开发•模块化

    微信小程序的MINA框架,其实是许多前端开发技术的组合.这篇文章中,我们来简单地讨论一下模块化. 1.模块化标准 玩前端的同学大部分都知道模块化的几个标准,CommonJs / AMD / CMD.这 ...

  8. 阿里云在RSAC 2018上宣布 将在西雅图建立安全实验室

    日前,2018年度的RSA Conference全球信息安全大会在美国加州旧金山市召开.作为全球三大云计算服务商之一,阿里云携3款全新安全产品亮相,并宣布今年将在西雅图设立全新的安全实验室,整合全球安 ...

  9. [SDOI 2011]染色

    Description 题库链接 给定一棵有 \(n\) 个节点的无根树和 \(m\) 个操作,操作有 \(2\) 类: 将节点 \(a\) 到节点 \(b\) 路径上所有点都染成颜色 \(c\) : ...

  10. ●BZOJ 4541 [Hnoi2016]矿区

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=4541 题解: 平面图的对偶图,dfs树 平面图的对偶图的求法: 把所有双向边拆为两条互为反向 ...