监听点击元素外部的事件。
<div ref="root" />
import { ref } from 'vue';
import { useClickAway } from '@vant/use';
export default {
setup() {
const root = ref();
useClickAway(root, () => {
console.log('click outside!');
});
return { root };
},
}; 通过 eventName 选项可以自定义需要监听的事件类型。
<div ref="root" />
import { ref } from 'vue';
import { useClickAway } from '@vant/use';
export default {
setup() {
const root = ref();
useClickAway(
root,
() => {
console.log('touch outside!');
},
{ eventName: 'touchstart' }
);
return { root };
},
}; type Options = {
eventName?: string;
};
function useClickAway(
target: Element | Ref<Element | undefined>,
listener: EventListener,
options?: Options
): void; | 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| target | 绑定事件的元素，支持传入数组来绑定多个元素 | Element | Ref<Element> | Array<Element | Ref<Element>> | - |
| listener | 点击外部时触发的回调函数 | EventListener | - |
| options | 可选的配置项 | Options | 见下表 |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| eventName | 监听的事件类型 | string | click |