<template>
|
<div
|
:class="[prefixCls + '-hue']"
|
tabindex="0"
|
@click="$el.focus()"
|
@keydown.esc="handleEscape"
|
@keydown.left="handleLeft"
|
@keydown.right="handleRight"
|
@keydown.up="handleUp"
|
@keydown.down="handleDown"
|
>
|
<div
|
ref="container"
|
:class="[prefixCls + '-hue-container']"
|
@mousedown="handleMouseDown"
|
@touchmove="handleChange"
|
@touchstart="handleChange">
|
<div
|
:style="{top: 0, left: `${percent}%`}"
|
:class="[prefixCls + '-hue-pointer']">
|
<div :class="[prefixCls + '-hue-picker']"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import HASMixin from './hsaMixin';
|
import Prefixes from './prefixMixin';
|
import {clamp} from './utils';
|
|
export default {
|
name: 'Hue',
|
|
mixins: [HASMixin, Prefixes],
|
|
data() {
|
const normalStep = 1 / 360 * 25;
|
const jumpStep = 20 * normalStep;
|
|
return {
|
left: -normalStep,
|
right: normalStep,
|
up: jumpStep,
|
down: -jumpStep,
|
powerKey: 'shiftKey',
|
percent: clamp(this.value.hsl.h * 100 / 360, 0, 100),
|
};
|
},
|
|
watch: {
|
value () {
|
this.percent = clamp(this.value.hsl.h * 100 / 360, 0, 100);
|
}
|
},
|
|
methods: {
|
change(percent) {
|
this.percent = clamp(percent, 0, 100);
|
|
const {h, s, l, a} = this.value.hsl;
|
const newHue = clamp(percent / 100 * 360, 0, 360);
|
|
if (h !== newHue) {
|
this.$emit('change', {h: newHue, s, l, a, source: 'hsl'});
|
}
|
},
|
handleSlide(e, direction) {
|
e.preventDefault();
|
e.stopPropagation();
|
|
if (e[this.powerKey]) {
|
this.change(direction < 0 ? 0 : 100);
|
return;
|
}
|
|
this.change(this.percent + direction);
|
},
|
handleChange(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
|
const left = this.getLeft(e);
|
|
if (left < 0) {
|
this.change(0);
|
return;
|
}
|
|
const {clientWidth} = this.$refs.container;
|
|
if (left > clientWidth) {
|
this.change(100);
|
return;
|
}
|
|
this.change(left * 100 / clientWidth);
|
},
|
},
|
};
|
</script>
|
