@prettyy/ui/components/utils/mixins/picker-triggers.js

vue2 UI

import util from "../date-util"

export default {
  created() {
    document.addEventListener('click', this.onDocumentClick)
    document.addEventListener('keyup', this.onKeyup)
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.onKeyup)
    document.removeEventListener('click', this.onDocumentClick)
  },
  computed: {},
  methods: {
    onDocumentClick({ target }) {
      if (this.trigger !== 'click') {
        return
      }

      // TODO
      if (!this.$refs.popper) {
        return
      }
      const elClicked = util.isParent(target, this.$el) || util.isParent(target, this.$refs.popper.$refs.body)

      if (this.isVisible) {
        if (!elClicked) {
          this.isVisible = false
        }
        return
      }

      if (elClicked) {
        this.isVisible = true
      }
    },
    onFocus() {
      if (this.trigger !== 'focus') {
        return
      }
      this.$nextTick(() => {
        this.isVisible = true
      })
    },
    onBlur() {
      if (this.trigger !== 'focus') {
        return
      }
      this.$nextTick(() => {
        const activeElement = document.activeElement
        if (util.isParent(activeElement, this.$el) || util.isParent(activeElement, this.$refs.popper.$refs.body)) {
          return
        }
        this.isVisible = false
      })
    },
    onKeyup(e) {
      if (e.keyCode === 27) {
        // ESC 关闭
        this.isVisible = false
      }
    }
  }
}