<div id="focus-ele"></div>

// js
const elm = document.querySelector('#focus-ele')
// default classname is focus-outside
focusBind(elm, callback, 'key', 'my-focus-name')

// css
// If you need to override all the default styles, you can put this code in the global CSS.
.my-focus-name {
  outline: none;
}

// import { bind, unbidn } from 'focus-outside'
// It is recommended to use the following alias to prevent conflicts with your function naming.
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

// If you are using a CDN, you should use it like this.
// <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
// const { bind: focusBind, unbind: focusUnbind } = FocusOutside

const elm = document.querySelector('#dorpdown-button')
// bind function
focusBind(elm, callback)

function callback () {
  console.log('You clicked on the area outside the dropdown button.')
  // clear bind
  focusUnbind(elm)
}

import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

const btnOne = document.querySelector('#button-one')
const btnTwo = document.querySelector('#button-two')
const btnThree = document.querySelector('#button-three')
const clearBtn = document.querySelector('#button-clear')

// Binding function and key
focusBind(btnOne, callbackOne, 'button-group')
focusBind(btnTwo, callbackTwo, 'button-group')
focusBind(btnThree, callbackThree, 'custom-button')
focusBind(clearBtn, clearCallback)

function callbackOne () {
  console.log('if you click on btnOne and btnTwo will not trigger this function')
}

function callbackTwo () {
  console.log('if I was triggered, it means you clicked on elements other than btnOne and btnTwo')
}

function callbackThree () {
  console.log('you clicked outside the btn-three')
}

function clearCallback() {
  console.log('Clear all button binding functions')
  focusUnbind(btnOne)
  focusUnbind(btnTwo)
  focusUnbind(btnThree)
  focusUnbind(clearBtn)
}

// outside.js
export default {
  bind (el, binding) {
    focusBind(el, binding.value)
  },

  unbind (el, binding) {
    focusUnbind(el)
  }
}

// xx.vue
<template>
  <div v-outside="handleOutside"></div>
</template>

import outside from './outside.js'

export default {
  directives: { outside },

  methods: {
    handleOutside () {
      // Do something...
    }
  }
}

<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>

import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

export default {
  mounted () {
    focusBind(this.$refs.dropdown.$el, this.$refs.dropdown.hide)
    focusBind(this.$refs.dropdownContent.$el, this.$refs.dropdown.hide)
  },

  destoryed () {
    focusUnbind(this.$refs.dropdown.$el)
    focusUnbind(this.$refs.dropdownContent.$el)
  }
}

import { Menu, Dropdown, Icon, Button } from 'antd'
import { bind: focusBind, unbind: focusUnbind } from 'focus-outside'

function getItems () {
  return [1,2,3,4].map(item => {
    return <Menu.Item key={item}>{item} st menu item </Menu.Item>
  })
}

class MyMenu extends React.Component {
  constructor (props) {
    super(props)
    this.menuElm = null
  }

  render () {
    return (<Menu ref="menu" onClick={this.props.onClick}>{getItems()}</Menu>)
  }

  componentDidMount () {
    this.menuElm = ReactDOM.findDOMNode(this.refs.menu)
    if (this.menuElm && this.props.outside) focusBind(this.menuElm, this.props.outside)
  }

  componentWillUnmount () {
    if (this.menuElm && this.props.outside) focusUnbind(this.menuElm)
  }
}

class MyDropdown extends React.Component {

  constructor (props) {
    super(props)
    this.dropdownElm = null
  }

  state = {
    visible: false
  }

  render () {
    const menu = (<MyMenu outside={ this.handleOutside } onClick={ this.handleClick } />)
    return (
      <Dropdown
        ref="divRef"
        visible={this.state.visible}
        trigger={['click']}
        overlay={ menu }>
        <Button style={{ marginLeft: 8 }} onClick={ this.handleClick }>
          Button <Icon type="down" />
        </Button>
      </Dropdown>
    )
  }

  componentDidMount () {
    this.dropdownElm = ReactDOM.findDOMNode(this.refs.divRef)
    if (this.dropdownElm) focusBind(this.dropdownElm, this.handleOutside)
  }

  componentWillUnmount () {
    if (this.dropdownElm) focusUnbind(this.dropdownElm)
  }

  handleOutside = () => {
    this.setState({ visible: false })
  }

  handleClick = () => {
    this.setState({ visible: !this.state.visible })
  }
}

ReactDOM.render(
  <MyDropdown/>,
  document.getElementById('container')
)