VEUI

VEUI on GitHub
Play!中文

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

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>
NameTypeDefaultDescription
refsArray<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.

TypeDescription
stringFind the specified DOM element collection based on ref in the context of the directive component.
VueComponent instance, use vm.$el element directly.
HTMLElementDOM element, use directly.
handlerfunction(event: Event): voidfunction() {}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.
triggerstring'click'External event name, can be click, mousedown, mouseup, hover, focus.
delaynumber0When 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.
excludeSelfbooleanfalseUsed to determine whether to exclude the self-element when calculating the target element collection.

Modifiers

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

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

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
© Baidu, Inc. 2024