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>
参数类型默认值描述
refsArray<string | Vue | HTMLElement>[]

该参数指定了目标元素集合,在目标元素之外触发指定事件,就会调用传入的回调函数。默认情况下,会将与 v-outside 指令绑定的元素算在目标元素之中,不过可以通过 excludeSelf 排除掉自身。

类型描述
string在指令所在组件上下文中,根据 ref 查找指定的 DOM 元素集合。
Vue组件实例,直接使用 vm.$el 元素。
HTMLElementDOM 元素,直接使用。
handlerfunction(event: Event): voidfunction() {}外部事件触发时的回调函数,会接收到相应的原生事件对象参数。回调函数的 event 参数会根据 trigger 参数变成相应的原生事件对象。
triggerstring'click'外部事件名,可取的值有:clickmousedownmouseuphoverfocus
delaynumber0triggerhover 的时候,鼠标移出目标元素 delay 毫秒之后,才触发回调函数。如果在 delay 毫秒之内,鼠标重新移回了目标元素集合内,就不会触发回调函数。
excludeSelfbooleanfalse在计算目标元素集合的时候,用于判断是否排除自身元素。

修饰符

对应 Object 类型绑定值中的 trigger / delay / excludeSelf。例如:

<div v-outside.hover.200.excludeSelf></div>

参数

对应 Object 绑定值中的 refs。值是一个用 , 分隔的、表示一到多个 ref 的字符串。例如:

<div v-outside:box1,box2></div>