v-outside
简介
v-outside 指令用于检测是否在某些元素之外触发了指定的事件，比如判断鼠标是否点击了元素 A 和 B 范围之外的元素。
示例
监测外部点击事件。
目标元素 A
<template>
<article
@mouseenter="inDemo = true"
@mouseleave="inDemo = false"
>
<div
v-outside="handleOutside"
class="box"
>
目标元素 A
</div>
</article>
</template>
<script>
import { outside, toast } from 'veui'
export default {
directives: {
outside
},
data () {
return {
timer: null,
inDemo: false
}
},
methods: {
handleOutside () {
if (this.inDemo) {
toast.info('点击了目标元素 A 外部。')
}
}
}
}
</script>
<style lang="less" scoped>
.box {
width: 500px;
height: 100px;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>
监测鼠标移出事件。
目标元素 B
<template>
<article>
<div
v-outside.hover="handleOutside"
class="box"
>
目标元素 B
</div>
</article>
</template>
<script>
import { outside, toast } from 'veui'
export default {
directives: {
outside
},
data () {
return {
consoleVisible: false,
timer: null
}
},
methods: {
handleOutside () {
toast.info('鼠标移到了目标元素B外部。')
}
}
}
</script>
<style lang="less" scoped>
.box {
width: 500px;
height: 100px;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>
如果鼠标在指定时间内，没有移回目标元素区域，就触发外部事件回调函数。
目标元素 C
目标元素 D
目标元素 E
<template>
<article>
<div
v-outside:box2,box3.hover.1000="handleOutside"
class="box1"
>
目标元素 C
</div>
<div
ref="box2"
class="box2"
>
目标元素 D
</div>
<div
ref="box3"
class="box3"
>
目标元素 E
</div>
</article>
</template>
<script>
import { outside, toast } from 'veui'
export default {
directives: {
outside
},
data () {
return {
consoleVisible: false,
timer: null
}
},
methods: {
handleOutside () {
toast.info('在 1000ms 内未移回目标元素 C、D、E，触发外部事件。')
}
}
}
</script>
<style lang="less" scoped>
.box1,
.box2,
.box3 {
width: 200px;
height: 100px;
background: #f7f7f7;
margin-right: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
article {
margin: -30px;
padding: 30px;
}
</style>
API
绑定值
类型：function | Object。
通过 function 类型配置触发外部事件时的回调函数。例如：
<div v-outside="handler"></div>
使用 Object 类型时绑定值可完整配置所有参数。例如：
<div v-resize="{
refs: 'box1,box2'
handler: handleOutsideEvent,
trigger: 'hover',
delay: 200,
excludeSelf: false
}"></div>
| 参数 | 类型 | 默认值 | 描述 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
refs | Array<string | Vue | HTMLElement> | [] | 该参数指定了目标元素集合，在目标元素之外触发指定事件，就会调用传入的回调函数。默认情况下，会将与
| ||||||||
handler | function(event: Event): void | function() {} | 外部事件触发时的回调函数，会接收到相应的原生事件对象参数。回调函数的 event 参数会根据 trigger 参数变成相应的原生事件对象。 | ||||||||
trigger | string | 'click' | 外部事件名，可取的值有：click，mousedown，mouseup，hover，focus。 | ||||||||
delay | number | 0 | 在 trigger 为 hover 的时候，鼠标移出目标元素 delay 毫秒之后，才触发回调函数。如果在 delay 毫秒之内，鼠标重新移回了目标元素集合内，就不会触发回调函数。 | ||||||||
excludeSelf | boolean | false | 在计算目标元素集合的时候，用于判断是否排除自身元素。 |
Object 类型提供的参数会覆盖通过指令参数、修饰符指定的参数。
修饰符
对应 Object 类型绑定值中的 trigger / delay / excludeSelf。例如：
<div v-outside.hover.200.excludeSelf></div>
在修饰符中的唯一正整数将被识别为 delay。
参数
对应 Object 绑定值中的 refs。值是一个用 , 分隔的、表示一到多个 ref 的字符串。例如：
<div v-outside:box1,box2></div>