【Vue】波纹指令

简述

material design感觉最有特色的首当其冲就是波纹效果了，鉴于网上很多的波纹按钮都只有在盒子中间展示，而vuetify上的波纹效果最符合material design的效果的，在哪里点击就在哪里泛开涟漪。但是如果为了一个指令而导入一个ui库的话，这样的成本太大了，虽然有按需引入，但是我感觉还是不太符合我当时设计secdra的初衷。
最后选择了通过阅读源码找到了这个指令的js：
https://github.com/JunJieFu/secdra-web/blob/master/assets/script/directive/ripple.js

以下波纹按钮的样式

.v-ripple__container {
   
  color: inherit;
  border-radius: inherit;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  contain: strict;
}

.v-ripple__animation {
   
  color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform, opacity;
}

.v-ripple__animation--enter {
   
  transition: none;
}

.v-ripple__animation--in {
   
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-ripple__animation--out {
   
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

这个指令的实现我还没有仔细阅读，后面会继续补充，不过这已经适合正常的开发使用了。
使用方法参考
https://vuetifyjs.com/en/directives/ripples#ripple-directive

例子

因为我用的是nuxt，所以我这里只做了针对nuxt的按钮（跳转部分，可根据需求自行修改）,css部分使用的是less

<template>
  <nuxt-link v-if="to" :to="to" class="btn"
             :class="classObject" v-ripple @click="_click" :target="target">
    <div class="content">
      <slot></slot>
    </div>
  </nuxt-link>
  <label v-else-if="!to&&type===`file`" class="btn"
         :class="classObject"</