【vue】Wave水波纹组件写法

wave的效果，waveObject当里面放置一张图片或者任意文字段落等等，按照方法写的话就会点击有水波纹。

（使用的是animation 和scale做出的效果，固定了圆圈放大和变透明的时间，不是匀速）

先要导入文件。

自定义图片和水波颜色的效果

使用方法：

  <wave-object class="icon-box"  wave-color="rgba(100, 36, 168, 0.3)">
    <img alt="" class="no-drag  "
         src="https://tse2-mm.cn.bing.net/th/id/OIP-C.nvDsLAbEPOJkeWXuO206NgHaFj?w=235&h=180&c=7&r=0&o=5&pid=1.7"/>
  </wave-object>
  <wave-object  >
    <img alt="" class="no-drag"
         src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ph2W8jiCyOWkerFqan1yBwHaEc?w=283&h=180&c=7&r=0&o=5&pid=1.7"/>
  </wave-object>

点击文字的效果。

使用方法

 

  <wave-object  >
   hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.hello world .i am here.
  </wave-object>

点击按钮的效果。

 

使用方法

  <wave-button style="width: 140px;height: 140px">Music</wave-button>

 另一种效果。

使用方法

  <wave-button wave-mode="cir" style="width: 140px;height: 140px">Music</wave-button>

组件的编写:

WaveButton.vue

<template>
  <button class="wave-button" @click="wave($event)">

    <div :class="['wave-frame',waveMode]" ref="wave"></div>
    <div class="wave-text">
      <slot></slot>
    </div>
  </button>
</template>
<script>
/* eslint-disable no-unused-vars
 */

export default {
  name: "waveButton",
  props:{
    waveMode:{default:'',type:String}
  },
  methods: {
    wave(e) {

      let x = e.offsetX;
      let y = e.offsetY;
      let xx = e.target.clientHeight;//最大值
      let yy = e.target.clientWidth;//最大值
      let lx = xx - x > x ? xx - x : x;
      let ly = yy - y > y ? yy - y : y;
      let lw = xx > yy ? xx : yy;

      let r = Math.sqrt(Math.pow(lx, 2) + Math.pow(ly, 2));
      let wave = document.createElement('div');
      wave.classList.add('wave-move');
      wave.style.left = x - r + 'px';
      wave.style.top = y - r + 'px';
      wave.style.width = r * 2 + 'px';
      wave.style.height = r * 2 + 'px';
      this.$refs.wave.appendChild(wave);
    },

  },
}
</script>

<style>
.wave-button {
  position: relative;
  border: none;
  padding: 10px;
  margin: 0;
  display: inline-block;
  overflow: hidden;
  color: #f0f6ff;
  background-color: #73a497;

}

@keyframes wave {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}

.wave-move {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background-color: rgba(26, 51, 59, 0.2);
  user-select: none;
  animation: wave 1s ease-in forwards;
}
.wave-frame.cir .wave-move{
  background-color: transparent;
  box-shadow: inset 0 0 20px 10px #063d2e;
}
.wave-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.wave-text {
  pointer-events: none;
  user-select: none;
  transform: translateX(0);

}
</style>

 WaveObject.vue

<template>
  <div class="wave-object" @click="wave($event)">
    <slot></slot>
    <div :class="['wave-frame',waveMode]" ref="wave"></div>
  </div>
</template>
<script>
/* eslint-disable no-unused-vars
 */

export default {
  name: "waveObject",
  props:{
    waveMode:{default:'',type:String},
    waveColor:{default:'',type:String},
  },
  methods: {
    wave(e) {

      let x = e.offsetX;
      let y = e.offsetY;
      let xx = e.target.clientHeight;//最大值
      let yy = e.target.clientWidth;//最大值
      let lx = xx - x > x ? xx - x : x;
      let ly = yy - y > y ? yy - y : y;
      let lw = xx > yy ? xx : yy;

      let r = Math.sqrt(Math.pow(lx, 2) + Math.pow(ly, 2));
      let wave = document.createElement('div');
      wave.classList.add('wave-move');
      wave.style.left = x - r + 'px';
      wave.style.top = y - r + 'px';
      wave.style.width = r * 2 + 'px';
      wave.style.height = r * 2 + 'px';

      if(this.waveColor){
        wave.style.backgroundColor=this.waveColor;
      }
      this.$refs.wave.appendChild(wave);
    },

  },
}
</script>

<style>
.wave-object {
  position: relative;
  border: none;
  display:inline-flex;
  overflow: hidden;

}

@keyframes wave2 {
  0% {
    background-size: 0 0 ;
  }
  80% {
    background-size: 100%  100% ;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}
@keyframes wave  {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }

}

.wave-move {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background-color: rgba(26, 51, 59, 0.2);
  user-select: none;
  animation: wave 1s ease-in forwards;

}
.wave-frame.cir .wave-move{
  background-color: transparent;
  box-shadow: inset 0 0 20px 10px #063d2e;
}
.wave-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.wave-text {
  pointer-events: none;
  user-select: none;
  transform: translateX(0);

}
</style>