use-click-outside

描述

用于捕获dom以外的元素点击事件

安装

npm i --save @kne/use-click-outside

概述

实现了一个点击容器之外触发回调函数的hooks

示例

示例样式

.container{
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

示例代码

• 基本示例
• 点击容器外部就弹窗提示
• _useClickOutside(@kne/use-click-outside),_message(antd/lib/message)

const {default: useClickOutside} = _useClickOutside;
const {default: message} = _message;

const BaseExample = () => {
    const ref = useClickOutside(() => {
        message.success('点击了容器外部');
    });
    return <div ref={ref} className="container">
        这是组件内部，点击外部试试
    </div>;
};

render(<BaseExample/>);

API

const ref = useClickOutside(callback, dom);

注意：返回的ref必须传给一个dom的ref

| 属性名 | 说明 | 类型 | 默认值 | |----------|---------------------|----------|---------------| | callback | 模拟的失去焦点事件触发后执行的回调 | function | - | | dom | 可以触发点击的外部区域，默认为body | dom | document.body |