English | 中文
what is this
A library that solves the problem that iframe element cannot trigger clickOutside.
API
function | descrption | options |
---|---|---|
bind |
Bind outside handlers to elements | el , callback , key , className , for details, see the Bind Params table below |
unbind |
Clear element binding function | el Element Node |
Bind Params
parameter | type | descrption | required | default |
---|---|---|---|---|
el |
Element | Element to be bound | true | - |
callback |
Function | The processing function when the outside event is triggered | true | - |
key |
String/Function | Divide elements or functions into a group of types. When the same group of elements is clicked, the outside event will not be triggered, while clicking on elements outside the same group will trigger the outside event. | false | callback function |
className |
String | The class name to bind to the element | false | "focus-outside" |
Notice
When the element is bound, focus-outside
sets the element as a focusable element, which will give it a highlight style when it gets the focus browser. If you don't want to see this style, you only need to put this element The CSS property outline is set to none. The bind function of the focsout-outside version 0.5.0 adds a className parameter, adding a class name for each bound element. The default class name is focus-outside
, and the class name is removed from the element when the unbind function is executed.
<div id="focus-ele"></div> // jsconst elm = document// default classname is focus-outside // css// If you need to override all the default styles, you can put this code in the global CSS.my-focus-name outline: none;
Use FocusOutside
Simple Example
// import { bind, unbidn } from 'focus-outside'// It is recommended to use the following alias to prevent conflicts with your function naming. // If you are using a CDN, you should use it like this.// <script src="https://unpkg.com/focus-outside@0.5.2/lib/index.js"></script>// const { bind: focusBind, unbind: focusUnbind } = FocusOutside const elm = document// bind function { console // clear bind }
Use of key
const btnOne = documentconst btnTwo = documentconst btnThree = documentconst clearBtn = document // Binding function and key { console} { console} { console} { console }
Used in Vue
// outside.js { } { } // xx.vue<template> <div v-outside="handleOutside"></div></template> directives: outside methods: { // Do something... }
Used in Element
<el-dropdown ref="dropdown" trigger="click"> <span class="el-dropdown-link"> dropdown menu<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu ref="dropdownContent" slot="dropdown"> <el-dropdown-item>Oyster</el-dropdown-item> <el-dropdown-item>Gold cake</el-dropdown-item> <el-dropdown-item>Lion head</el-dropdown-item> <el-dropdown-item>Snail powder</el-dropdown-item> <el-dropdown-item>Double skin milk</el-dropdown-item> </el-dropdown-menu></el-dropdown> { } { }
Used in Ant Design
{ return 1234} Component { superprops thismenuElm = null } { return <Menu ref="menu" onClick=thispropsonClick></Menu> } { thismenuElm = ReactDOM if thismenuElm && thispropsoutside } { if thismenuElm && thispropsoutside } Component { superprops thisdropdownElm = null } state = visible: false { const menu = <MyMenu outside= thishandleOutside onClick= thishandleClick /> return <Dropdown ref="divRef" visible=thisstatevisible trigger='click' overlay= menu > <Button style= marginLeft: 8 onClick= thishandleClick > Button <Icon type="down" /> </Button> </Dropdown> } { thisdropdownElm = ReactDOM if thisdropdownElm } { if thisdropdownElm } { this } { this } ReactDOM
Build a development environment
1. Fork project, then clone to local.git clone git@github.com:txs1992/focus-outside.git 2. Installation dependencies yarn install 3. run the projectyarn dev
License
MIT