github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 16:22:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 优化自定义颜色组件交互

Browse Source
This commit is contained in:
奔跑的面条 2023-02-27 12:46:36 +08:00
parent 97899f275a
commit 6f4e967b49
3 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColor/index.vue
View File

@ -56,7 +56,7 @@
<n-a @click="createColor">立即创建</n-a> <n-a @click="createColor">立即创建</n-a>
</n-text> </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 <n-card
class="color-card" class="color-card"
:class="{ selected: item.id === selectColorId }" :class="{ selected: item.id === selectColorId }"
@ -69,8 +69,8 @@
<n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis> <n-ellipsis style="text-align: left; width: 70px">{{ item.name }} </n-ellipsis>
<span <span
class="theme-color-item" class="theme-color-item"
v-for="colorItem in item.color" v-for="(colorItem, index) in item.color"
:key="colorItem" :key="index"
:style="{ backgroundColor: colorItem }" :style="{ backgroundColor: colorItem }"
></span> ></span>
</div> </div>
@ -127,7 +127,7 @@ type ColorType = {
const defaultColor: ColorType = { const defaultColor: ColorType = {
id: getUUID(), id: getUUID(),
name: '未命名', name: '未命名',
color: ['#6ae5bb', '#69e3de', '#5ac4ee', '#5ac4ee', '#4498ec', '#3c7ddf'] color: ['#6ae5bb', '#69e3de', '#5ac5ee', '#5ac4ee', '#4498ec', '#3c7ddf']
} }
const chartEditStore = useChartEditStore() const chartEditStore = useChartEditStore()
const modelShowRef = ref(false) const modelShowRef = ref(false)

12
src/views/chart/ContentConfigurations/components/CanvasPage/components/CreateColorRender/index.vue
View File

@ -27,6 +27,7 @@
:show-preview="true" :show-preview="true"
:modes="['hex']" :modes="['hex']"
@complete="completeHandle($event, index)" @complete="completeHandle($event, index)"
@update:show="selectHandle(item, index)"
/> />
<div v-show="index > 5"> <div v-show="index > 5">
<n-tooltip trigger="hover"> <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) => { const completeHandle = (color?: string, index?: number) => {
color && (targetColor.color = color) color && (targetColor.color = color)
index && (targetColor.index = index) index && (targetColor.index = index)
@ -205,6 +212,9 @@ const selectExpandColor = (color: string, isHexa: boolean) => {
const addColor = () => { const addColor = () => {
const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31' const lastData = editColor.value?.color[editColor.value?.color.length - 1] || '#2c2c31'
editColor.value?.color.push(lastData) editColor.value?.color.push(lastData)
nextTick(() => {
emit('updateColor', editColor.value)
})
} }
// 删除颜色 // 删除颜色

2
src/views/chart/ContentEdit/components/EditRange/index.vue
View File

@ -55,7 +55,7 @@ const rangeModelStyle = computed(() => {
position: relative; position: relative;
transform-origin: left top; transform-origin: left top;
background-size: cover; background-size: cover;
border-radius: 20px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@include fetch-border-color('hover-border-color'); @include fetch-border-color('hover-border-color');
@include fetch-bg-color('background-color2'); @include fetch-bg-color('background-color2');