perf: 优化层级展示, 优化失焦隐藏代码

This commit is contained in:
奔跑的面条 2022-09-29 09:55:11 +08:00
parent 6ea3f0701e
commit b66205eda9
2 changed files with 19 additions and 17 deletions

View File

@ -843,7 +843,8 @@ export const useChartEditStore = defineStore({
)
}
this.updateComponentList(index, targetItem)
this.setTargetSelectChart(undefined)
// 锁定添加失焦效果
if(status) this.setTargetSelectChart(undefined)
loadingFinish()
return
}
@ -876,14 +877,10 @@ export const useChartEditStore = defineStore({
)
}
this.updateComponentList(index, targetItem)
this.setTargetSelectChart(undefined)
loadingFinish()
// 取消选择隐藏
if (status) {
const chartEditStore = useChartEditStore()
chartEditStore.setTargetSelectChart(undefined)
}
// 隐藏添加失焦效果
if (status) this.setTargetSelectChart(undefined)
}
} catch (value) {
loadingError()

View File

@ -1,5 +1,5 @@
<template>
<div v-show="!isGroup">
<div class="icon-item-box" v-show="!isGroup">
<n-icon
class="go-ml-1 icon-item"
:class="{ active: status.lock }"
@ -68,15 +68,20 @@ const lockHandle = (e: MouseEvent) => {
<style lang="scss" scoped>
$activeColor: v-bind('themeColor');
.icon-item {
opacity: 0;
padding-top: 5px;
&.active,
&:hover {
color: $activeColor;
}
&.active {
opacity: 1 !important;
.icon-item-box {
white-space: nowrap;
.icon-item {
opacity: 0;
padding-top: 5px;
@extend.go-transition;
&.active,
&:hover {
color: $activeColor;
}
&.active {
opacity: 1 !important;
}
}
}
</style>