Browse Source

修改第一次添加修改问题

bill 2 years ago
parent
commit
42a44c7d7c
3 changed files with 119 additions and 5 deletions
  1. 5 0
      src/router/config.ts
  2. 5 5
      src/sdk/association.ts
  3. 109 0
      src/views/test/index.vue

+ 5 - 0
src/router/config.ts

@@ -104,6 +104,11 @@ export const routes = [
     path: paths[RoutesName.signModel],
     name: RoutesName.signModel,
     component: () => import('@/views/sign-model/index.vue')
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('@/views/test/index.vue')
   }
 ]
 

+ 5 - 5
src/sdk/association.ts

@@ -178,17 +178,17 @@ const associationModels = (sdk: SDK) => {
           watch(
             () => item.bottom, 
             () => isUnSet || getSceneModel(item)?.changeBottom(item.bottom), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.opacity, 
             () => isUnSet || getSceneModel(item)?.changeOpacity(item.opacity), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.scale, 
             () => isUnSet || getSceneModel(item)?.changeScale(item.scale), 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.position, 
@@ -197,7 +197,7 @@ const associationModels = (sdk: SDK) => {
                 getSceneModel(item)?.changePosition(item.position)
               }
             }, 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => item.rotation, 
@@ -206,7 +206,7 @@ const associationModels = (sdk: SDK) => {
                 getSceneModel(item)?.changeRotation(item.rotation)
               }
             }, 
-            { immediate: true }
+            // { immediate: true }
           )
           watch(
             () => modelShow.value, 

+ 109 - 0
src/views/test/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="layout">
+    <TI v-model:attr.number="attr" />
+    123123
+    <button @click="show = !show">切换</button>
+    <input type="text" @change="ev => ev.returnValue">
+    <component :is="cp" v-for="cp in cps"></component>
+
+    <keep-alive>
+      <TIN v-if="show" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, h, defineComponent, ref, onMounted, onUnmounted, onUpdated, computed, PropType } from 'vue'
+
+const TP = defineComponent({
+  props: {
+    children: { type: String }
+  },
+  setup(props) {
+    onUpdated(() => {
+      console.log('updated', props.children)
+    }),
+    onMounted(() => {
+      console.log('mounted', props.children)
+    })
+    onUnmounted(() => {
+      console.log('unmounted', props.children)
+    })
+
+    return () => h('p', props.children)
+  }
+})
+const TP1 = () => h(TP, { children: '111' })
+const TP2 = () => h(TP, { children: '222' })
+const TP3 = () => h(TP, { children: '333' })
+const TP4 = () => h(TP, { children: '444' })
+
+const TI = defineComponent({
+  props: {
+    attr: {
+      type: String
+    },
+    'onUpdate:attr': {
+      type: Function as PropType<(attr: string) => void>,
+    }
+  },
+  setup(props) {
+    const change = () => {
+      console.log('-->', props.attr)
+      props['onUpdate:attr']!(' 1' + props.attr + '1 ')
+    }
+    console.log(props)
+
+    return () => h('div', [
+        '内容:' + props.attr,
+        h('button', { onClick: change }, '变化')
+      ])
+  }
+})
+
+const TIN = defineComponent({
+  setup() {
+
+    return () => h('div', {style: { height: '3000px' }}, [
+      h('input')
+    ])
+  }
+})
+
+export default defineComponent({
+  setup() {
+    const data = reactive([
+      { name: '张三' },
+      { name: '李四' },
+    ])
+    const show = ref(false)
+    const cps = computed(() => 
+      show.value ? [TP1, TP2, TP3] : [TP4, TP1, TP2, TP3]
+    )
+    const attr = ref('1')
+
+    return {
+      cps,
+      show,
+      attr
+    }
+  },
+  components: {
+    TI,
+    TIN
+  }
+})
+
+
+</script>
+
+<style scoped>
+  .layout {
+    overflow: auto;
+    height: 100vh;
+    background-color: #ccc;
+  }
+  input {
+    border: 1px solid #000;
+  }
+</style>