layui/example/docs/zh-CN/hooks/useClickOutside.md
2021-11-23 11:08:40 +08:00

776 B

::: title 基础使用 :::

::: block 使 用 useClickOutside 监 听 元 素 外 click 事 件 :::

<template>
  <lay-button type="primary" ref="buttonRef">当前元素</lay-button>
</template>

<script>
import { ref, watch } from 'vue'
import useClickOutside from '/@src/hooks/useClickOutside'

export default {
  setup() {
    const buttonRef = (ref < null) | (HTMLElement > null)
    const isClickOutside = useClickOutside(buttonRef)

    watch(isClickOutside, () => {
      console.log('元素外 click 事件')
    })

    return {
      buttonRef,
    }
  },
}
</script>

::: title 使用备注 :::

::: table

备注 描述 类型
isClickOutside 使用 watch 监听 Ref

:::