Though it may appear that this week has been a fairly slow week for Vue.js news, at least one important, critical library has come into the light. That library is vue-ripple-directive! Once you’ve used it you’ll wonder how you ever lived without it. It provides your app with the ability to add Material Design Ripples to any component with a simple directive.

尽管对于Vue.js新闻来说，本周似乎是相当缓慢的一周，但至少有一个重要的关键库已经曝光。 该库是vue-ripple-directive ！ 一旦使用了它，您会想知道没有它的生活。 它使您的应用程序能够通过简单的指令将Material Design Ripples添加到任何组件中 。

Ready to get started?

准备开始了吗？

安装 (Installation)

Install vue-ripple-directive via Yarn or NPM:

通过Yarn或NPM安装vue-ripple-directive ：

# Yarn
$ yarn add vue-ripple-directive

# NPM
$ npm install vue-ripple-directive --save

Then register the directive:

然后注册指令：

import Vue from 'vue';
import Ripple from 'vue-ripple-directive';
import App from 'App.vue';

// Register the ripple directive.
Vue.directive('ripple', Ripple);

new Vue({
  el: '#app',
  render: h => h(App)
});

添加涟漪 (Adding Ripples)

You can now add ripples to any component using the v-ripple directive:

现在，您可以使用v-ripple指令将波纹添加到任何组件：

<button v-ripple>Button Example</button>

And customize the color:

并自定义颜色：

<button v-ripple="'rgba(200, 10, 10, 0.2)'">Creepy Red Button Example</button>

Change the transition speed:

更改过渡速度：

<button v-ripple.200>ReallyFastButtonExample</button>

Or even trigger it on mouseover!

甚至在鼠标悬停时触发它！

<button v-ripple.mouseover>C'mere mouse! (Example)</button>

翻译自: https://www.digitalocean.com/community/tutorials/vuejs-ripple-things