正文 

当前位置： 首页 > 程序 > java教程

vue波纹按钮组件(代码片段)

zhanglearning zhanglearning     2022-11-07     663

关键词：

代码链接：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="4" :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要好好休息一下。

 

xml浮动动作按钮背景和波纹效果。(代码片段)

查看详情

19-vue之elementui-按钮组件(代码片段)

目录创建按钮属性使用代码示例效果图参数说明 创建按钮elementui中的标签都是el开头<el-button>默认按钮</el-button>属性使用属性全部写在组件标签上：属性名=属性值代码示例//buttondetail.vue文件<template><div>&l... 查看详情

vue手写按钮状态组件(代码片段)

 实现效果 用插槽来支持自定义文案用props来传入指定的大小，风格样式使用组件<XtxButtontype="gray"size="mini">加入购物车</XtxButton><XtxButtontype="plain"size="small">加入 查看详情

自己开发的vue滑动按钮组件vue-better-slider(代码片段)

...的滑动删除功能等，如下为该组件的文档。一个Vue的滑动按钮组件，有关滑动方面的处理借鉴better-scroll的实现。在线例子起步安装npmi--savevue-sliding-button引入importVuefrom‘vue‘imp 查看详情

android按钮实现按压水波纹效果(代码片段)

...android:foreground="?selectableItemBackground"即可实现水波纹的效果。但是这需要在API23也就是说需要在Android6.0系统的手机上面，才会有效果。方法二：给Button按钮设置背景<?xmlversion="1.0"encoding 查看详情

vue一步一步带你封装一个按钮组件(代码片段)

#前言本文主要对子组件的封装做一个了解首先我们直接看一下代码显示首先是今天有一个学妹过来问我如何封装子组件#实现效果首先这个组件是基于eleemnt-ui进行封装的我们看一眼实现效果 有了实现效果之后我们一起来看看... 查看详情

web动态按钮设计——波纹扩散(代码片段)

目录📕效果演示📕制作过程🎈[.html]🎈[.css]🎈[.js]📕成品代码📕效果演示这里是个"明色"⟺\\Longleftrightarrow⟺"暗色"主题切换按钮的应用📕制作过程🎈[.html]分析一下主体部分一个... 查看详情

vue路由组件左右切换（×××返回键或自写按钮）(代码片段)

1安装vue-cli（1）下载安装node.js（1）npminstall-gcnpm--registry=https://registry.npm.taobao.org换源（1）cnpminstall-gvue-cli全局安装vue-cli已安装则不用（1）vueinitwebpackVue-Project初始化vue项目使用webpack模板，项目名称（自带webpack）（1）cnpmins 查看详情

vue同一组件重复用，数据被覆盖的问题(代码片段)

...件，有时需要显示两个 <van-buttontype="default">默认按钮</van-button><van-buttontype="primary">主要按钮</van-button> 但这样的话，第一个按钮会无法显示，使用如下方式就可以解决~<componentis="van-button"type="default">... 查看详情

vue-cli中使用父子之间传值_父组件传值子组件_封装button按钮(代码片段)

vue-cli中使用父子之间传值_父组件传值子组件_封装button按钮使用prop属性,(借助v-bind绑定)study01.vue中代码<template><div><header-btn@handleSave="handleSave"@handleSubmit="handleSubmit":headerBtns="headerBtns"/></di 查看详情

波纹按钮实现(代码片段)

...f;border-radius:5px;text-align:center;cursor:pointer;overflow:hidden;原始波纹样式.waves-animationposition:absolute;border-radius:50%;width:25px;height:25px;background:rgba(255,255,255,0.3);transition:all750msease-out;transform:scale(0);html部分<divclass="btn">pressme!</div>js部... 查看详情

element全局设置按钮组件size(代码片段)

引入Element时，可以传入一个全局配置对象。该对象目前支持size与 zIndex 字段Vue.use(ElementUI,size:‘small‘,zIndex:3000)importVuefrom‘vue‘importElementUIfrom‘element-ui‘import‘element-ui/lib/theme-chalk/index.css‘;impor 查看详情

vue.js高效前端开发•antdesignofvue框架基础(代码片段)

...3、导航菜单组件使用4、面包屑组件使用5、实践练习三、按钮和全局提示组件1、全局提示组件使用2、按钮组件使用3、实践练习四、表格组件1、表格组件介绍2、表格组 查看详情

vue.js高效前端开发•antdesignofvue框架基础(代码片段)

...3、导航菜单组件使用4、面包屑组件使用5、实践练习三、按钮和全局提示组件1、全局提示组件使用2、按钮组件使用3、实践练习四、表格组件1、表格组件介绍2、表格组 查看详情

怎么用vue实现点击图片(按钮)的波纹效果（涟漪动效）

参考技术A1.先是通过鼠标的点击事件的target属性获取点击的节点，获取该节点的宽和高（offset）2.通过layerX，layerY获取鼠标位置3.播放动画wave.vue 查看详情

vue3返回顶部组件及返回顶部js封装(代码片段)

...面滚动的js，及页面滚动到一定像素时，显示返回顶部的按钮，点击按钮会有放大的动画，并逐渐滚动到顶部的组件。效果如下：代码封装js，监听屏幕滚动事件，以及是否显示返回顶部的按钮；在项目目录下新建utils文件夹，并... 查看详情

flutter组件总结(代码片段)

...; 更强大的手势组件GestureDetector（onTap），如果需要有波纹效果则用InkWell代替，具有类似效果的还有RaisedBuitton、FlatButton、CupertinoButton。2、InkWell（波纹显示按压效果组件同GestureDetector）  必须以Material 组件为祖先... 查看详情

vue系列之vant移动端组件库的使用(代码片段)

#通过npm安装#查看是否安装完成#main.js引入vant组件#按钮使用例子：<van-buttontype="default">默认按钮</van-button>更多组件使用查看：https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/button 查看详情