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

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

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