vue3 水波纹自定义指令.docxVIP

第PAGE2页/共NUMPAGES2页

vue3水波纹自定义指令

Vue3中可以使用自定义指令来实现水波纹效果。下面是一个简单的示例：

```html

template

divclass=container

div

v-for=(item,index)initems

:key=index

class=item

@click=toggleActive(index)

{{item}}

/div

/div

/template

script

import{ref,onMounted,watchEffect}fromvue

exportdefault{

setup(){

constactiveIndex=ref(null)

onMounted(()={

activeIndex.value=0

})

watchEffect(()={

if(activeIndex.value!==null){

document.addEventListener(click,handleClick)

}else{

document.removeEventListener(click,handleClick)

}

})

functionhandleClick(event){

constitems=document.querySelectorAll(.item)

constdistance=Math.max(...items.map(item=item.getBoundingClientRect().left+window.scrollX))

constdistanceFromTarget=event.clientX-distance

constisActive=activeIndex.value===indexOf(event.target)

if(isActivedistanceFromTarget50){

activeIndex.value=indexOf(event.target)

}

}

functionindexOf(element){

returnitems.indexOf(element)

}

return{

activeIndex,

items:[]asany[]

}

}

}

/script

stylescoped

.container{

position:relative;

}

.item{

position:absolute;

left:0;

top:0;

width:100px;

height:50px;

background-color:#ccc;

color:#fff;

padding:10px;

font-size:20px;

border-radius:10px;

}

.item:hover{

background-color:#f00;

}

.container::before{

content:;

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background-color:rgba(0,0,0,0.1);

z-index:-1;

}

/style

```

这个示例中，我们使用了一个`activeIndex`来跟踪当前激活的元素的索引，当用户点击元素时，我们通过监听整个页面的`click`事件来检测是否有元素从`activeIndex`对应的位置离开，如果有，我们就将`activeIndex`对应的元素设置为激活状态，否则就取消激活状态。同时，我们还使用了一个`container::before`伪元素来实现水波纹的效果。