theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add color-picker component

Browse Source
This commit is contained in:
就眠儀式 2022-02-14 02:00:08 +08:00
parent dca886e3a4
commit 297e731c1f
2 changed files with 112 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/component/colorPicker/index.less
View File

@ -1,7 +1,7 @@
.layui-color-picker {
position: relative;
user-select: none;
width: 100%;
width: 320px;
background: #fff;
padding: 10px;
}
@ -75,8 +75,7 @@
position: relative;
height: 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
background-size: 10px 10px;
}
@ -102,6 +101,14 @@
background-size: 10px 10px;
}
.layui-colorpicker > span {
width: 26px;
height: 26px;
display: block;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAWElEQVRIiWM8fubkfwYygKWJOSM5+mCAhRLNoxaPWjxq8ajFoxbTyeL/DAfJ0Xjs3Cl7Siwmu4Yht1aDgZEYx6MWj1o8avGoxaMWD3qLya5X//4nqx6HAQC7RBGFzolqTAAAAABJRU5ErkJggg==");
background-size: 10px 10px;
}
/* 颜色的值 hex rgba */
.color-value {
width: 100%;
@ -124,7 +131,7 @@
outline: none;
text-align: center;
border-radius: 2px;
border: 1px solid #ccc;
border: 1px solid #eee;
}
.color-value p {
@ -160,8 +167,9 @@
.preset li {
width: 20px;
height: 20px;
padding: 0px;
margin-right: 6px;
margin-bottom: 6px;
border: 1px solid #ccc;
border: 1px solid #eee;
border-radius: 2px;
}

55
src/component/colorPicker/index.vue
View File

@ -1,4 +1,17 @@
<template>
<lay-dropdown>
<div class="layui-unselect layui-colorpicker">
<span>
<span
class="layui-colorpicker-trigger-span"
lay-type=""
:style="`background-color: ${colorObj.rgba}`"
>
<i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i>
</span>
</span>
</div>
<template #content>
<div class="layui-color-picker">
<div
class="saturation-value"
@ -36,33 +49,32 @@
<div class="color-value">
<div class="hex">
<label>
<input :value="colorObj.hex8" @input="hexChange" spellcheck="false" />
<input
:value="colorObj.hex8"
@input="hexChange"
spellcheck="false"
/>
</label>
<p>Hex</p>
</div>
<div class="rgba-r">
<label>
<input :value="red" @input="redChange" />
</label>
<p>R</p>
</div>
<div class="rgba-g">
<label>
<input :value="green" @input="greenChange" />
</label>
<p>G</p>
</div>
<div class="rgba-b">
<label>
<input :value="blue" @input="blueChange" />
</label>
<p>B</p>
</div>
<div class="rgba-a">
<label>
<input :value="alpha" @input="alphaChange" />
</label>
<p>A</p>
</div>
</div>
<ul class="preset">
@ -75,6 +87,8 @@
</ul>
</div>
</template>
</lay-dropdown>
</template>
<script lang="ts">
export default {
@ -83,7 +97,8 @@ export default {
</script>
<script lang="ts" setup>
import "./index.less"
import "./index.less";
import LayDropdown from "../dropdown/index.vue";
import { ref, computed, watch, onMounted } from "vue";
const emit = defineEmits(["update:color"]);
@ -96,27 +111,17 @@ export interface LayColorPicker {
const props = withDefaults(defineProps<LayColorPicker>(), {
modelValue: { r: 217, g: 128, b: 95, a: 1 },
preset: [
"#D0021B",
"#F5A623",
"#F8E71C",
"#8B572A",
"#7ED321",
"#417505",
"#BD10E0",
"#9013FE",
"#4A90E2",
"#50E3C2",
"#B8E986",
"#000000",
"#4A4A4A",
"#9B9B9B",
"#FFFFFF",
],
"#009688",
"#1e9fff",
"#ffb800",
"#ff5722",
"#5fb878",
]
});
const saturationValue = ref<null | HTMLElement>(null);
const hueSlider = ref<null | HTMLElement>(null)
const alphaSlider = ref<null | HTMLElement>(null)
const hueSlider = ref<null | HTMLElement>(null);
const alphaSlider = ref<null | HTMLElement>(null);
let pointStyle = ref("top: 25%;left: 80%;");
let hueSliderStyle = ref("left: 0;");