Quellcode durchsuchen

feat: 增加 锁定组件 hover 和 select 样式控制

tnt group vor 3 Jahren
Ursprung
Commit
e49cf3dea2
1 geänderte Dateien mit 11 neuen und 1 gelöschten Zeilen
  1. 11 1
      src/views/chart/ContentEdit/components/EditShapeBox/index.vue

+ 11 - 1
src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-shape-box">
+  <div class="go-shape-box" :class="{ lock: item.status.lock, hide: item.status.hide }">
     <slot></slot>
     <!-- 锚点 -->
     <template v-if="!hiddenPoint">
@@ -55,12 +55,14 @@ const themeColor = computed(() => {
 
 // 计算当前选中目标
 const hover = computed(() => {
+  if (props.item.status.lock) return false
   return props.item.id === chartEditStore.getTargetChart.hoverId
 })
 
 // 兼容多值场景
 const select = computed(() => {
   const id = props.item.id
+  if (props.item.status.lock) return false
   return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 </script>
@@ -70,6 +72,14 @@ const select = computed(() => {
   position: absolute;
   cursor: move;
 
+  &.lock {
+    cursor: default !important;
+  }
+
+  &.hide {
+    display: none;
+  }
+
   /* 锚点 */
   .shape-point {
     z-index: 1;