Xx-vue custom command realizes clicking water ripples effect

Table of Contents Overview:

|____
|____directive
| |____waves.css
| |____waves.js
|____main.js

.waves-ripple {
    position: absolute;
    border-radius: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .35) 100%, rgba(0, 0, 0, .15) 100%);
    background-clip: padding-box;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
}
.-active {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
}

import './';
const vueWaves = {};
 = (Vue, options = {}) =&gt; {
  ('waves', {
    bind(el, binding) {
      ('click', e =&gt; {
        const customOpts = (options, );
        const opts = ({
            ele: el, // Corrugated elements            type: 'hit', // Hit click location diffusion center center point expansion            color: 'rgba(0, 0, 0, 0.15)' // Corrugated color          }, customOpts),
          target = ;
        if (target) {
           = 'relative';
           = 'hidden';
          const rect = ();
          let ripple = ('.waves-ripple');
          if (!ripple) {
            ripple = ('span');
             = 'waves-ripple';
             =  = (, ) + 'px';
            (ripple);
          } else {
             = 'waves-ripple';
          }
          switch () {
            case 'center':
               = ( / 2 -  / 2) + 'px';
               = ( / 2 -  / 2) + 'px';
              break;
            default:
               = ( -  -  / 2 - ) + 'px';
               = ( -  -  / 2 - ) + 'px';
          }
           = ;
           = 'waves-ripple z-active';
          return false;
        }
      }, false);
    }
  })
};
export default vueWaves;

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import vueWaves from './directive/waves'
(vueWaves)
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
})

Example of usage:

v-waves
&lt;a class='header__crumbs--btn' @='goback' v-waves&gt;return&lt;/a&gt;

The above is the detailed content of the Xx-vue custom command to realize the effect of clicking on water ripples. For more information about clicking on water ripples, please pay attention to my other related articles!