|
|
@@ -1,34 +1,29 @@
|
|
|
<template>
|
|
|
<div class="color-layout">
|
|
|
- <span
|
|
|
- v-for="color in predefineColors"
|
|
|
- :style="color && { backgroundColor: color }"
|
|
|
- :class="{
|
|
|
- weight: color === '#FFFFFF' || color === null,
|
|
|
- tran: color === null,
|
|
|
- active: (value && value.toUpperCase() === color) || (value || null) === color,
|
|
|
- }"
|
|
|
- @click="
|
|
|
+ <span v-for="color in predefineColors" :style="color && { backgroundColor: color }" :class="{
|
|
|
+ weight: color === '#FFFFFF' || color === null,
|
|
|
+ tran: color === null,
|
|
|
+ active: (value && value.toUpperCase() === color) || (value || null) === color,
|
|
|
+ }" @click="
|
|
|
() => {
|
|
|
emit('update:value', color);
|
|
|
emit('change');
|
|
|
}
|
|
|
- "
|
|
|
- />
|
|
|
+ " />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref } from "vue";
|
|
|
+import { ref, watchEffect } from "vue";
|
|
|
import { themeColor } from "@/constant";
|
|
|
|
|
|
-const props = defineProps<{ value?: string; canun?: boolean }>();
|
|
|
+const props = defineProps<{ value?: string; canun?: boolean, colors?: (string | null)[] }>();
|
|
|
|
|
|
const emit = defineEmits<{
|
|
|
(e: "update:value", val: string | null): string;
|
|
|
(e: "change"): void;
|
|
|
}>();
|
|
|
-const predefineColors = ref<Array<string | null>>([
|
|
|
+const def = [
|
|
|
"#000000",
|
|
|
"#FFFFFF",
|
|
|
"#DD2C2C",
|
|
|
@@ -36,24 +31,32 @@ const predefineColors = ref<Array<string | null>>([
|
|
|
"#FFBE00",
|
|
|
"#1AAD19",
|
|
|
themeColor,
|
|
|
-]);
|
|
|
-if (props.canun) {
|
|
|
- predefineColors.value.push(null);
|
|
|
-}
|
|
|
+]
|
|
|
+
|
|
|
+const predefineColors = ref<Array<string | null>>(def);
|
|
|
+watchEffect(() => {
|
|
|
+ if (props.colors?.length) {
|
|
|
+ predefineColors.value = props.colors
|
|
|
+ } else {
|
|
|
+ predefineColors.value = def
|
|
|
+ if (props.canun) {
|
|
|
+ predefineColors.value.push(null);
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.color-layout {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ gap: 8px;
|
|
|
|
|
|
span {
|
|
|
cursor: pointer;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
border-radius: 4px;
|
|
|
-
|
|
|
&.weight {
|
|
|
border: 1px solid #ccc;
|
|
|
}
|