代码链接: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. python继承——封装

    python继承--封装 1 为什么要封装 封装数据的主要原因是:保护隐私 封装方法的主要原因是:隔离复杂度 2 封装分为两个层面 第一个层面的封装(什么都不用做):创建类和对象会分别创建二者的名称空 ...

  2. Linux命令基础

    开启Linux操作系统,root用户登录GNOME图形界面,如下图: 切换到虚拟终端2,使用普通用户身份登录,查看系统提示符,如下图: 使用命令退出虚拟终端2上的登录用户,如下图: 切换到虚拟终端5, ...

  3. windows10无法启动承载网络

    每个都试一下

  4. Java Servlet(十一):一个servlet被10个浏览器客户端访问时会创建几个servlet实例?

    一般Servlet只初始化一次(只有一个实例).对于更多的客户端请求,Server创建新的请求和响应对象,仍然激活此Servlet的service()方法,将这两个对象作为参数传递给该方法.如此重复以 ...

  5. 使用生成器把Kafka写入速度提高1000倍

    title: 使用生成器把Kafka写入速度提高1000倍 toc: true comment: true date: 2018-04-13 21:35:09 tags: ['Python', '经验 ...

  6. Protobuf java版本安装步骤

    1,安装mavena.下载apache-maven-3.2.5,链接:http://mirrors.hust.edu.cn/apache//maven/maven-3/3.2.5/binaries/b ...

  7. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  8. [LeetCode] Smallest Range 最小的范围

    You have k lists of sorted integers in ascending order. Find the smallest range that includes at lea ...

  9. [USACO13DEC]假期计划(黄金)Vacation Planning (gold)

    题目翻译不好,这里给出一份 题目背景 Awson是某国际学校信竞组的一只大佬.由于他太大佬了,于是干脆放弃了考前最后的集训,开车(他可是老司机)去度假.离开学校前,他打开地图,打算做些规划. 题目描述 ...

  10. 基于vfs实现自己的文件系统

    1.Linux 文件系统组成结构 linux文件系统有两个重要的特点:一个是文件系统抽象出了一个通用文件表示层--虚拟文件系统或称做VFS.另外一个重要特点就是它的文件系统支持动态安装(或说挂载等), ...