《关于Vue的涟漪点击》

  自己做了个demo,但是想点击的样式有所不一样,了解了一下vue-ripple-directive,这个是用来改变点击时的有水波纹的效果。除了这个之外,还有一个vue-touch-ripple,这两者相比的话,我觉得vue-ripple-directive比较好用,而且很方便!!!

  首先就是安装:npm install vue-ripple-directive --save

  其次就是main.js文件进入:

    import Ripple from 'vue-ripple-directive'

    /*

    *  Ripple.color = 'rgba(255, 255, 255, 0.35)';    //这里是用来设置波纹颜色
    *  Ripple.zIndex = 55; //设置它的层级

    */

    Vue.directive('ripple',Ripple)

  /*这样引入后,在其他的地方就可以直接用了,注释掉的部分,可用可不用*/

  最后调用:

    eg:

      <div style="150px;height:150px;line-height:150px;background-color:#000;color:#fff"  v-ripple>点这里</div>

      <!---没错,这里直接用v-ripple就可以有水波纹的效果了~-->

    小白kitty的记录

  

原文地址:https://www.cnblogs.com/kitty-chan/p/12843804.html