vue-ripple-directive点击水波纹（个人）

最新推荐文章于 2024-06-12 13:02:56 发布

Mark sheng

最新推荐文章于 2024-06-12 13:02:56 发布

阅读量657

点赞数 1

分类专栏： vue 文章标签：点击水波纹 vue

本文链接：https://blog.csdn.net/qq_37430247/article/details/110919425

版权

vue 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

在这里插入图片描述

安装

npm install vue-ripple-directive --save

main.js引入

import Ripple from 'vue-ripple-directive'
Vue.directive('ripple', Ripple);
Ripple.color = 'rgba(0, 0, 0, 0.2)'; //自定义水波纹颜色

  <div class="rippleBtn" v-ripple>水波纹按钮</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mark sheng

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解

余浩的博客

03-06

5053

（1）vue-class-component 是官方出品； vue-property-decorator 是社区出品；（2）vue-class-component 提供了Vue、Component等；（3）vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch；

vue自定义指令Vuedirective实现点击水波纹效果

08-12

vue自定义指令(Vue.directive)实现点击水波纹效果

参与评论您还未登录，请先登录后发表或查看评论

vue-ripple-directive点击水波纹

明知山

07-10

1355

安装 npm install vue-ripple-directive --save main.js引入 import Ripple from 'vue-ripple-directive' Vue.directive('ripple', Ripple); Ripple.color = 'rgba(0, 0, 0, 0.2)'; <div class="rippleBtn" v-ripple>水波纹按钮</div>

Vue组件设计 | 实现水波涟漪效果的点击反馈指令

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

06-14

1052

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群点击反馈不知道小伙伴们有没有注意过这样一个细节，有的应用按钮，链接，可交互的卡片点击起来十分有感觉，而有的却像是点在...

vue-ripple-directive:纹波效应作为Vue指令

05-23

物质纹波效应材质纹波效果作为Vue指令。该指令适用于您希望实现这种波纹效果的任何元素。安装 npm install vue-ripple-directive --save 重要通知如果附加指令的位置相对，则该指令将更好地工作。尽管该指令将尝试设置position: relative如果元素不具有此属性。这是因为自v2.0。*起，涟漪指令更改了其定位方法，以避免在UI元素移动时出现拖尾问题，从而导致涟漪保持在先前位置，而不是元素移动到的位置。选项传递给指令的可选参数。范围类型价值观 color-value 细绳默认值：'rgba（0，0，0，0.35）' 。接受HEX，RGB和RGBA值。为了获得最佳外观，请使用不透明度较低的RGBA。修饰符默认情况下，此伪指令将单击处理程序附加到元素，并且过渡设置为600ms。对于那些想要修改它们的人，只需将修饰符

Vue_button实现水波纹效果

Tom__cy的博客

06-10

3228

目录结构：和调用方法 index.js: import waves from './waves' const install = function(Vue) { Vue.directive('waves', waves) } if (window.Vue) { window.waves = waves Vue.use(install); // eslint-disable-l...

draggable-vue-directive：处理拖放的Vue2指令

02-04

npm install draggable-vue-directive --save 演示版您可以在此处查看现场演示： : 例子没有处理程序 classic draggable .vue文件： import { Draggable } from 'draggable-vue-directive' ... export ...

vue项目中使用vue-directive-image-previewer插件进行图片放大处理

luoteen的博客

12-27

4325

安装vue-directive-image-previewer插件 npm install vue-directive-image-previewer --save 在vue项目中的main.js中引入并注册 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directi...

vuerippledirective作为Vue指令使用的Material波纹效果

08-09

文件"PygmySlowLoris-vue-ripple-directive-3223c0c"可能包含了这个自定义指令的源代码，我们可以从中学习到如何实现这个效果。通常，这样的实现会包含以下步骤： 1. **事件监听**：添加点击事件监听器，当用户点击...

vue水波纹点击效果

zcg359670476的博客

11-13

1258

引用组件： import WaveItem from './components/waves' components: { WaveItem }, app.vue最上部 <wave-item/> //waves.vue <template> <div data-tname="WaveItem"> <div class="main-container"> <div class="waves"> &l.

纸片点击出现涟漪效果

04-30

利用jQuery实现点击事件，点击div出现涟漪特效涟漪特效。

js点击按钮实现水波纹效果代码（CSS3和Canves）

10-21

主要为大家详细介绍了点击按钮实现水波纹效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue水波纹指令

李剑一

09-29

5102

vue2实现一下水波纹指令。在div或者button中，触发点击时，出现水波纹效果。

vue系列开发2---一个ripple点击效果插件

Cool的博客

08-14

2265

1.封装一个vue ripple的插件。已经封装好了！可参考https://segmentfault.com/a/1190000006931367 2.使用，引入组件 <button type="button" class="btn"> 这个是按钮 <ripple class="ripple" :center-ripple="fals...

Vue 波纹按钮组件

diaotanp28742的博客

04-28

299

代码链接：https://github.com/zhangKunUserGit/vue-component 效果图：大家可以在线运行:https://zhangkunusergit.github.io/vue-component/dist/btnRipple.html看看效果（一定要狠狠的点击哦）。先说一下用法： <zk-button class="btn ...

vue 水波纹指令_纹波效应作为Vue指令

cuk5340的博客

07-23

1085

vue 水波纹指令物质纹波效应 (Material Ripple Effect) Material Ripple Effect as Vue Directive. 材质纹波效果作为Vue指令。 View demo 查看演示 Download Source 下载源 This directive it's meant to be used in any element in which ...

Vue波纹按钮组件制作

qq_42485486的博客

06-21

515

?默认按钮默认按钮定义速度和初始的波浪透明度原理：这里用的是canvas + requestAnimationFrame（兼容性可以网上找一下解决方法）绘制的波纹，有些用的是css transform + setTimeout做的，我感觉不太好。模板（template）：点击代码如下（我已经加入详细的注释）ripple(event) { // 清除上次没有执行的动画 if (this.timer...

Vue配置项之directives