bin-ui/src/components/color-picker/hsaMixin.js

基于 vue2.6 / vue-cli3 的 UI 组件库

import Emitter from '../../mixins/emitter'
import handleEscapeMixin from './handleEscapeMixin'
import { getTouches } from './utils'
import { on, off } from '../../utils/dom'

export default {
  mixins: [Emitter, handleEscapeMixin],

  props: {
    focused: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: undefined
    }
  },
  beforeDestroy () {
    this.unbindEventListeners()
  },
  created () {
    if (this.focused) {
      setTimeout(() => this.$el.focus(), 1)
    }
  },
  methods: {
    handleLeft (e) {
      this.handleSlide(e, this.left, 'left')
    },
    handleRight (e) {
      this.handleSlide(e, this.right, 'right')
    },
    handleUp (e) {
      this.handleSlide(e, this.up, 'up')
    },
    handleDown (e) {
      this.handleSlide(e, this.down, 'down')
    },
    handleMouseDown (e) {
      this.dispatch('ColorPicker', 'dragging', true)
      this.handleChange(e, true)
      // window.addEventListener('mousemove', this.handleChange, false);
      // window.addEventListener('mouseup', this.handleMouseUp, false);
      on(window, 'mousemove', this.handleChange)
      on(window, 'mouseup', this.handleMouseUp)
    },
    handleMouseUp () {
      this.unbindEventListeners()
    },
    unbindEventListeners () {
      // window.removeEventListener('mousemove', this.handleChange);
      // window.removeEventListener('mouseup', this.handleMouseUp);
      off(window, 'mousemove', this.handleChange)
      off(window, 'mouseup', this.handleMouseUp)
      // This timeout is required so that the click handler for click-outside
      // has the chance to run before the mouseup removes the dragging flag.
      setTimeout(() => this.dispatch('ColorPicker', 'dragging', false), 1)
    },
    getLeft (e) {
      const { container } = this.$refs
      const xOffset = container.getBoundingClientRect().left + window.pageXOffset
      const pageX = e.pageX || getTouches(e, 'PageX')

      return pageX - xOffset
    },
    getTop (e) {
      const { container } = this.$refs
      const yOffset = container.getBoundingClientRect().top + window.pageYOffset
      const pageY = e.pageY || getTouches(e, 'PageY')
      return pageY - yOffset
    }
  }
}