v-outside

The v-outside directive is used to detect whether a specified event is triggered outside of certain elements, such as determining whether the mouse has clicked outside of the range of elements A and B.

Examples

Detecting external click events.

目标元素 A

Edit this demo on GitHubEdit

<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>

Detecting mouse out events.

目标元素 B

Edit this demo on GitHubEdit

<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>

If the mouse does not return to the target element area within the specified time, the external event callback function is triggered.

目标元素 C

目标元素 D

目标元素 E

Edit this demo on GitHubEdit

<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

Please refer to the official document for the specific usage of the directive. For more detailed parameters, please refer to Custom Directive.

Options

Type: function | object.

Configure the callback function when triggering an external event with the function type. For example:

<div v-outside="handler"></div>

When using the object type, the binding value can fully configure all parameters. For example:

<div v-resize="{
  refs: 'box1,box2'
  handler: handleOutsideEvent,
  trigger: 'hover',
  delay: 200,
  excludeSelf: false
}"></div>

Name Type Default Description

refs

Array<string | Vue | HTMLElement>

[]

This parameter specifies the target element collection. When the specified event is triggered outside the target element, the passed-in callback function will be called. By default, the element bound with the v-outside directive is included in the target element, but it can be excluded by excludeSelf.

Type	Description
`string`	Find the specified DOM element collection based on `ref` in the context of the directive component.
`Vue`	Component instance, use `vm.$el` element directly.
`HTMLElement`	DOM element, use directly.

handler function(event: Event): void function() {} The callback function triggered when an external event occurs will receive the corresponding native event object parameter. The event parameter of the callback function will become the corresponding native event object according to the trigger parameter.

trigger string 'click' External event name, can be click, mousedown, mouseup, hover, focus.

delay number 0 When trigger is hover, the callback function is triggered delay milliseconds after the mouse moves out of the target element. If the mouse moves back into the target element collection within delay milliseconds, the callback function will not be triggered.

excludeSelf boolean false Used to determine whether to exclude the self-element when calculating the target element collection.

The parameters provided by the object type will override the parameters specified by the directive arguments and modifiers.

Modifiers

Corresponding to trigger / delay / excludeSelf in the object type binding value. For example:

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

The only positive integer in the modifier will be recognized as delay.

Arguments

Corresponding to refs in the object type binding value. The value is a string separated by , and represents one or more ref. For example:

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

Edit this page on GitHubEdit