向您的Vue.js组件添加材料波纹

骑猪看日落 2022-11-27 04:29 104阅读 0赞

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:

然后注册指令：

main.js

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!

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