fix(vue-renderer): ignore hidden in live mode

knight.chen · knight.chen · commit 9977c0ac76f4 · 2022-07-05T18:01:14.000+08:00
diff --git a/packages/vue-renderer/src/core/hoc.ts b/packages/vue-renderer/src/core/hoc.ts
@@ -4,50 +4,37 @@ import { SlotNode } from '@alilc/lowcode-designer';
 import {
   ComponentPublicInstance,
   h,
-  ref,
   Fragment,
-  computed,
   reactive,
   onUnmounted,
   defineComponent,
 } from 'vue';
 import { leafProps } from './base';
 import { useRendererContext } from '../context';
-import { ensureArray, parseSchema } from '../utils';
+import { ensureArray } from '../utils';
 import { PropSchemaMap, SlotSchemaMap, useLeaf } from './use';
 
 export const Hoc = defineComponent({
   name: 'Hoc',
   props: leafProps,
   setup(props) {
-    const hidden = ref(!!props.schema.hidden);
-    const condition = ref<unknown>(props.schema.condition ?? true);
-
     const { triggerCompGetCtx } = useRendererContext();
-    const { node, locked, buildSchema, buildProps, buildSlost, buildLoop } =
+    const { node, locked, buildSchema, buildProps, buildSlost, buildLoop, buildShow } =
       useLeaf(props);
 
+    const { show, hidden, condition } = buildShow(props.schema);
     const { loop, updateLoop, updateLoopArg, buildLoopScope } = buildLoop(props.schema);
+
     const compProps: PropSchemaMap = reactive({});
     const compSlots: SlotSchemaMap = reactive({});
     const result = buildSchema();
     Object.assign(compProps, result.props);
     Object.assign(compSlots, result.slots);
 
-    const show = computed(() => {
-      if (hidden.value) return false;
-      const { value: showCondition } = condition;
-      if (typeof showCondition === 'boolean') return showCondition;
-      return !!parseSchema(showCondition, props.scope);
-    });
-
     // hoc
     if (node) {
       const disposeFunctions: Array<CallableFunction | undefined> = [];
       onUnmounted(() => disposeFunctions.forEach((dispose) => dispose?.()));
-      disposeFunctions.push(
-        node.onVisibleChange((visible) => void (hidden.value = !visible))
-      );
       disposeFunctions.push(
         node.onChildrenChange(() => {
           const schema = node.export(TransformStage.Render);
@@ -59,9 +46,12 @@ export const Hoc = defineComponent({
           const { key, prop, newValue, oldValue } = info;
           if (key === '___isLocked___') {
             locked.value = newValue;
+          } else if (key === '___hidden___') {
+            // 设计器控制组件渲染
+            hidden(newValue);
           } else if (key === '___condition___') {
             // 条件渲染更新 v-if
-            condition.value = newValue;
+            condition(newValue);
           } else if (key === '___loop___') {
             // 循环数据更新 v-for
             updateLoop(newValue);
diff --git a/packages/vue-renderer/src/core/live.ts b/packages/vue-renderer/src/core/live.ts
@@ -1,26 +1,16 @@
-import { computed, defineComponent, Fragment, h, ref } from 'vue';
+import { defineComponent, Fragment, h } from 'vue';
 import { useLeaf } from './use';
 import { leafProps } from './base';
-import { parseSchema } from '../utils';
 
 export const Live = defineComponent({
   props: leafProps,
   setup(props) {
-    const hidden = ref(!!props.schema.hidden);
-    const condition = ref<unknown>(props.schema.condition ?? true);
-
-    const { buildSchema, buildProps, buildLoop, buildSlost } = useLeaf(props);
+    const { buildSchema, buildProps, buildLoop, buildSlost, buildShow } = useLeaf(props);
 
+    const { show } = buildShow(props.schema);
     const { loop, loopArgs } = buildLoop(props.schema);
     const { props: compProps, slots: compSlots } = buildSchema();
 
-    const show = computed(() => {
-      if (hidden.value) return false;
-      const { value: showCondition } = condition;
-      if (typeof showCondition === 'boolean') return showCondition;
-      return !!parseSchema(showCondition, props.scope);
-    });
-
     return {
       show,
       loop,
diff --git a/packages/vue-renderer/src/core/use.ts b/packages/vue-renderer/src/core/use.ts
@@ -555,6 +555,28 @@ export function useLeaf(props: LeafProps) {
     };
   };
 
+  const buildShow = (schema: NodeSchema) => {
+    const hidden = isDesignMode ? ref(schema.hidden ?? false) : ref(false);
+    const condition = ref<unknown>(schema.condition ?? true);
+
+    const show = computed(() => {
+      if (hidden.value) return false;
+      const { value: showCondition } = condition;
+      if (typeof showCondition === 'boolean') return showCondition;
+      return !!parseSchema(showCondition, props.scope);
+    });
+
+    return {
+      show,
+      hidden: (val: boolean) => {
+        hidden.value = val;
+      },
+      condition: (val: unknown) => {
+        condition.value = val;
+      },
+    };
+  };
+
   /**
    * 装饰默认插槽，当插槽为空时，渲染插槽占位符，便于拖拽
    *
@@ -628,6 +650,7 @@ export function useLeaf(props: LeafProps) {
   return {
     node,
     locked,
+    buildShow,
     renderComp,
     buildLoop,
     buildProps,
