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

准备好开始了吗？

安装

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

# Yarn
$ yarn add vue-ripple-directive

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

然后注册指令：

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)
});

添加波纹

您现在可以使用v-ripple指令向任何组件添加涟漪：

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

并自定义颜色：

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

改变过渡速度：

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

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

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