layui/example/docs/zh-CN/hooks/useClickOutside.md

43 lines
776 B
Markdown
Raw Normal View History

2021-10-27 02:04:47 +08:00
::: title 基础使用
2021-10-25 00:36:19 +08:00
:::
::: block 使 用 useClickOutside 监 听 元 素 外 click 事 件
:::
2021-10-25 00:36:19 +08:00
```vue
2021-10-27 02:04:47 +08:00
<template>
<lay-button type="primary" ref="buttonRef">当前元素</lay-button>
2021-10-27 02:04:47 +08:00
</template>
2021-10-25 00:36:19 +08:00
2021-10-27 02:04:47 +08:00
<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 事件')
2021-10-27 02:04:47 +08:00
})
return {
buttonRef,
2021-10-27 02:04:47 +08:00
}
},
2021-10-27 02:04:47 +08:00
}
</script>
```
2021-10-27 02:04:47 +08:00
::: title 使用备注
2021-10-27 02:04:47 +08:00
:::
2021-11-07 15:55:08 +08:00
::: table
| 备注 | 描述 | 类型 |
| -------------- | --------------- | ---- |
| isClickOutside | 使用 watch 监听 | Ref |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::