<template>
|
<div class="select-color">
|
<div class="color red" :class="[selectColor === '#FF0000' ? 'active' : '']" @click="selectColorClick('#FF0000')" />
|
<div
|
class="color green"
|
:class="[selectColor === '#008000' ? 'active' : '']"
|
@click="selectColorClick('#008000')"
|
/>
|
<div
|
class="color yellow"
|
:class="[selectColor === '#0000FF' ? 'active' : '']"
|
@click="selectColorClick('#0000FF')"
|
/>
|
<div
|
class="gradit-color"
|
:style="{ 'background': `linear-gradient(${selectColor}, ${adjustColor(selectColor, 200)})` }"
|
/>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: {
|
selectColor: {
|
type: String,
|
default: '#FF0000'
|
}
|
},
|
methods: {
|
selectColorClick(item) {
|
this.$emit('update:selectColor', item)
|
this.$emit('changeRender')
|
},
|
adjustColor(color, range) {
|
let newColor = '#'
|
for (let i = 0; i < 3; i++) {
|
const hxStr = color.substr(i * 2 + 1, 2)
|
let val = parseInt(hxStr, 16)
|
val += range
|
if (val < 0) val = 0
|
else if (val > 255) val = 255
|
newColor += val.toString(16).padStart(2, '0')
|
}
|
this.$emit('minColor', newColor)
|
return newColor
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.select-color {
|
position: fixed;
|
top: 0;
|
z-index: 100000;
|
padding: 20px;
|
}
|
|
.title {
|
font-size: 26px;
|
font-weight: 700;
|
margin-bottom: 10px;
|
}
|
|
.color {
|
width: 100px;
|
height: 100px;
|
margin-bottom: 20px;
|
}
|
|
.red {
|
background-color: red;
|
}
|
|
.green {
|
background-color: green;
|
}
|
|
.yellow {
|
background-color: #0000FF;
|
}
|
|
.active {
|
border: 2px solid #a0a0a0;
|
box-shadow: 0 0 10px #232323;
|
}
|
|
.gradit-color {
|
width: 10px;
|
height: 200px;
|
border-radius: 10px;
|
}
|
</style>
|
