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>

總結(jié)

以上是生活随笔為你收集整理的【vue】Wave水波纹组件写法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。