cc-inspector-chrome/source/src/devtools/propertys.vue

<template>
  <div id="prop">
    <div v-for="(group, index) in allGroup" :key="index" class="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>

<script lang="ts">
import Vue from "vue"

import {Component, Prop, Watch} from "vue-property-decorator"
import UiProp from "./ui-prop.vue"

@Component({
  components: {UiProp},
})
export default class properties extends Vue {
  name: string = "properties"

  @Prop({default: () => [],})
  allGroup: Array<Record<string, any>> | undefined;

  onClickHeader(group: any) {
    if (group && group.hasOwnProperty('fold')) {
      group.fold = !group.fold;
    }
  }

  @Prop({default: "label"})
  private label?: string | undefined

  setup() {

  }

  @Watch('allGroup')
  watchAllGroup() {
    this._initValue();
  }

  created() {
    this._initValue();
  }

  _initValue() {
    if (this.allGroup) {
      this.allGroup.forEach(item => {
        this.$set(item, 'fold', false);
      })
    }
  }

  _evalCode(code: string) {
    if (chrome && chrome.devtools) {
      chrome.devtools.inspectedWindow.eval(code);
    } else {
      console.log(code);
    }
  }
}
</script>

<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;
    }

    .header:hover {
      color: #6d6d6d;
    }

    .content {
      padding: 0 5px;
    }
  }
}
</style>