<template>
|
<div class="el-color-svpanel"
|
:style="{
|
backgroundColor: background
|
}">
|
<div class="el-color-svpanel__white"></div>
|
<div class="el-color-svpanel__black"></div>
|
<div class="el-color-svpanel__cursor"
|
:style="{
|
top: cursorTop + 'px',
|
left: cursorLeft + 'px'
|
}">
|
<div></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import draggable from '../draggable';
|
|
export default {
|
name: 'el-sl-panel',
|
|
props: {
|
color: {
|
required: true
|
}
|
},
|
|
computed: {
|
colorValue() {
|
const hue = this.color.get('hue');
|
const value = this.color.get('value');
|
return { hue, value };
|
}
|
},
|
|
watch: {
|
colorValue() {
|
this.update();
|
}
|
},
|
|
methods: {
|
update() {
|
const saturation = this.color.get('saturation');
|
const value = this.color.get('value');
|
|
const el = this.$el;
|
let { clientWidth: width, clientHeight: height } = el;
|
|
this.cursorLeft = saturation * width / 100;
|
this.cursorTop = (100 - value) * height / 100;
|
|
this.background = 'hsl(' + this.color.get('hue') + ', 100%, 50%)';
|
},
|
|
handleDrag(event) {
|
const el = this.$el;
|
const rect = el.getBoundingClientRect();
|
|
let left = event.clientX - rect.left;
|
let top = event.clientY - rect.top;
|
left = Math.max(0, left);
|
left = Math.min(left, rect.width);
|
|
top = Math.max(0, top);
|
top = Math.min(top, rect.height);
|
|
this.cursorLeft = left;
|
this.cursorTop = top;
|
this.color.set({
|
saturation: left / rect.width * 100,
|
value: 100 - top / rect.height * 100
|
});
|
}
|
},
|
|
mounted() {
|
draggable(this.$el, {
|
drag: (event) => {
|
this.handleDrag(event);
|
},
|
end: (event) => {
|
this.handleDrag(event);
|
}
|
});
|
|
this.update();
|
},
|
|
data() {
|
return {
|
cursorTop: 0,
|
cursorLeft: 0,
|
background: 'hsl(0, 100%, 50%)'
|
};
|
}
|
};
|
</script>
|
