From 82d800f943bd706bd987d3b3b32e97ddf674ac55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Mon, 27 Feb 2023 12:46:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=87=AA=E5=AE=9A?=
=?UTF-8?q?=E4=B9=89=E9=A2=9C=E8=89=B2=E7=BB=84=E4=BB=B6=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../CanvasPage/components/CreateColor/index.vue | 8 ++++----
.../components/CreateColorRender/index.vue | 12 +++++++++++-
.../chart/ContentEdit/components/EditRange/index.vue | 2 +-
3 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
index 5edac24a..4186750c 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
@@ -56,7 +56,7 @@
<n-a @click="createColor">立即创建</n-a>
</n-text>
<!-- 列表 -->
- <div class="color-card-box" v-for="(item, index) in colorList" :key="item.id">
+ <div class="color-card-box" v-for="(item, index) in colorList" :key="index">
<n-card
class="color-card"
:class="{ selected: item.id === selectColorId }"
@@ -69,8 +69,8 @@
<n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis>
<span
class="theme-color-item"
- v-for="colorItem in item.color"
- :key="colorItem"
+ v-for="(colorItem, index) in item.color"
+ :key="index"
:style="{ backgroundColor: colorItem }"
></span>
</div>
@@ -127,7 +127,7 @@ type ColorType = {
const defaultColor: ColorType = {
id: getUUID(),
name: '未命名',
- color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf']
+ color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf']
}
const chartEditStore = useChartEditStore()
const modelShowRef = ref(false)
diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
index 7a842200..a3f6c441 100644
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
@@ -27,6 +27,7 @@
:show-preview="true"
:modes="['hex']"
@complete="completeHandle($event, index)"
+ @update:show="selectHandle(item, index)"
/>
<div v-show="index > 5">
<n-tooltip trigger="hover">
@@ -183,7 +184,13 @@ const getRenderBackgroundColor = (color?: string) => {
}
}
-// 顶部选择颜色
+// 点击颜色
+const selectHandle = (color: string, index: number) => {
+ targetColor.color = color
+ targetColor.index = index
+}
+
+// 顶部改变颜色
const completeHandle = (color?: string, index?: number) => {
color && (targetColor.color = color)
index && (targetColor.index = index)
@@ -205,6 +212,9 @@ const selectExpandColor = (color: string, isHexa: boolean) => {
const addColor = () => {
const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31'
editColor.value?.color.push(lastData)
+ nextTick(() => {
+ emit('updateColor', editColor.value)
+ })
}
// 删除颜色
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index d9a7bcc9..d3be9d95 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -55,7 +55,7 @@ const rangeModelStyle = computed(() => {
position: relative;
transform-origin: left top;
background-size: cover;
- border-radius: 20px;
+ border-radius: 10px;
overflow: hidden;
@include fetch-border-color('hover-border-color');
@include fetch-bg-color('background-color2');