拆分的更细点

source/src/devtools/ui/property-group.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="property-group">
+    <div class="header" @click="onClickHeader">
+      <div style="margin: 0 5px;">
+        <i v-if="fold" class="el-icon-caret-right"></i>
+        <i v-if="!fold" class="el-icon-caret-bottom"></i>
+      </div>
+      {{ group.name }}
+    </div>
+    <div class="content" v-show="!fold">
+      <ui-prop v-for="(item, index) in group.data" :key="index"
+               :name="item.name" :value="item.value">
+      </ui-prop>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+import {Prop} from "vue-property-decorator";
+import {Group} from "@/devtools/data";
+import UiProp from "@/devtools/ui/ui-prop.vue";
+
+@Component({
+  name: "property-group",
+  components: {UiProp}
+})
+export default class PropertyGroup extends Vue {
+  private fold = false;
+  @Prop({
+    default: () => {
+      return new Group('test')
+    }
+  })
+  group!: Group;
+
+  created() {
+  }
+
+  mounted() {
+  }
+
+  onClickHeader(group: any) {
+    this.fold = !this.fold;
+  }
+}
+</script>
+
+<style scoped lang="less">
+.property-group {
+  .header {
+    height: 40px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    border-bottom: 1px #6d6d6d solid;
+    background-color: #1da1f7;
+  }
+
+  .header:hover {
+    color: #6d6d6d;
+  }
+
+  .content {
+    padding: 0 5px;
+  }
+}
+</style>

source/src/devtools/ui/propertys.vue

@@ -1,19 +1,6 @@
 <template>
   <div id="prop">
-    <div v-for="(group, index) in data.group" :key="index" class="group">
+    <property-group v-for="(group, index) in data.group" :key="index" :group="group"></property-group>
-      <div class="header" @click="onClickHeader(group)">
-        <div style="margin: 0 5px;">
-          <i v-if="group.fold" class="el-icon-caret-right"></i>
-          <i v-if="!group.fold" class="el-icon-caret-bottom"></i>
-        </div>
-        {{ group.name }}
-      </div>
-      <div class="content" v-show="!group.fold">
-        <ui-prop v-for="(item, index) in group.data" :key="index"
-                 :name="item.name" :value="item.value">
-        </ui-prop>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -22,10 +9,11 @@ import Vue from "vue"
 
 import {Component, Prop, Watch} from "vue-property-decorator"
 import UiProp from "./ui-prop.vue"
-import {NodeInfoData} from "@/devtools/data";
+import {Group, NodeInfoData} from "@/devtools/data";
+import PropertyGroup from "@/devtools/ui/property-group.vue";
 
 @Component({
-  components: {UiProp},
+  components: {PropertyGroup, UiProp},
 })
 export default class properties extends Vue {
   @Prop({
@@ -35,30 +23,14 @@ export default class properties extends Vue {
   })
   data!: NodeInfoData;
 
-  onClickHeader(group: any) {
-    if (group && group.hasOwnProperty("fold")) {
-      group.fold = !group.fold;
-    }
-  }
 
   @Watch("data")
-  watchData(oldValue: NodeInfoData, newValue: NodeInfoData) {
+  watchData(newValue: NodeInfoData, oldValue: NodeInfoData) {
-    this._initValue(oldValue.uuid === newValue.uuid);
   }
 
   created() {
-    this._initValue();
   }
 
-  _initValue(isSameNode = true) {
-    if (this.data.group) {
-      // 第一个cc.Node不折叠
-      for (let i = 0; i < this.data.group.length; i++) {
-        let item = this.data.group[i];
-        this.$set(item, "fold", i !== 0);
-      }
-    }
-  }
 
   _evalCode(code: string) {
     if (chrome && chrome.devtools) {
@@ -72,25 +44,6 @@ export default class properties extends Vue {
 
 <style scoped lang="less">
 #prop {
-  .group {
-    .header {
-      height: 40px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      user-select: none;
-      cursor: pointer;
-      border-bottom: 1px #6d6d6d solid;
-      background-color: #1da1f7;
-    }
 
-    .header:hover {
-      color: #6d6d6d;
-    }
-
-    .content {
-      padding: 0 5px;
-    }
-  }
 }
 </style>