为 Vue.js 组件添加材质波纹

虽然这周似乎对Vue.js新闻来说相当缓慢,但至少有一个重要的关键图书馆已经出现了,该图书馆是Vue-ripple指令!一旦你使用了它,你会想知道你如何生活在没有它的情况下。

准备好开始吗?

安装

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

1# Yarn
2$ yarn add vue-ripple-directive
3
4# NPM
5$ npm install vue-ripple-directive --save

然后注册指令:

 1[label main.js]
 2import Vue from 'vue';
 3import Ripple from 'vue-ripple-directive';
 4import App from 'App.vue';
 5
 6// Register the ripple directive.
 7Vue.directive('ripple', Ripple);
 8
 9new Vue({
10  el: '#app',
11  render: h => h(App)
12});

添加 Ripples

您现在可以使用 v-ripple 指令将 Ripples 添加到任何组件中:

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

用颜色定制:

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

改变过渡速度:

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

或者甚至在鼠标上触发它!

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