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

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 you like to achieve such ripple effect.

该指令可用于您希望实现这种涟漪效果的任何元素。

安装 (Installation)

npm install vue-ripple-directive --save

重要通知 (Important Notice)

The directive will work better if the element where you attach it is relative positioned. Although the directive will try to set position: relative if the element does not have this property. This is because since v2.0.* the ripple directive changed its positioning method to avoid trailing issues when elements in the UI move, causing the ripple to stay in previous position and not in the one that element moved to.

如果附加指令的位置相对 ，则该指令将更好地工作。 尽管该指令将尝试设置position: relative如果元素不具有此属性。 这是因为自v2.0。*起，涟漪指令更改了其定位方法，以避免在UI元素移动时出现拖尾问题，从而导致涟漪保持在先前位置，而不是元素移动到的位置。

选件 (Options)

Optional parameter to pass to the directive.

传递给指令的可选参数。

Parameter	Type	Values
color-value	String	Default: 'rgba(0, 0, 0, 0.35)'. Accepts either HEX, RGB & RGBA values. For optimal look use RGBA with low opacity.

参数	类型	价值观
color-value	串	默认值：'rgba(0，0，0，0.35)' 。 接受HEX，RGB和RGBA值。 为了获得最佳外观，请使用不透明度较低的RGBA。

修饰符 (Modifiers)

By default this directive attaches a click handler to the element as well as the transition is set for 600ms. For those who wants to modify the same, just pass modifiers to the directive:

默认情况下，此指令将点击处理程序附加到元素，并且过渡设置为600ms。 对于那些想要修改它们的人，只需将修饰符传递给指令：

v-ripple.mouseover.500

Can also modify only one

也只能修改一个

v-ripple.mouseover

样品和用法 (Sample & Usage)

First you need to import the directive and add it to Vue.

首先，您需要导入指令并将其添加到Vue。

import Ripple from 'vue-ripple-directive'

Vue.directive('ripple', Ripple);

Then use on any element you want to achieve the effect.

然后在要获得效果的任何元素上使用。

<div v-ripple class="button is-primary">This is a button</div>

If you want a custom color just pass a color parameter as string. It's best if you use RGBA colors to achieve a greater effect.

如果要自定义颜色，只需将color参数作为string传递即可。 最好使用RGBA颜色以获得更好的效果。

<div v-ripple="'rgba(255, 255, 255, 0.35)'"  class="button">I have different color</div>

全局设置 (Global settings)

You can set the default color and z-index for all your ripples as the following example

您可以为所有波纹设置默认颜色和z-index，如以下示例所示

import Ripple from 'vue-ripple-directive'

Ripple.color = 'rgba(255, 255, 255, 0.35)';
Ripple.zIndex = 55;
Vue.directive('ripple', Ripple);

翻译自: https://vuejsexamples.com/material-ripple-effect-as-vue-directive/

vue 水波纹指令