From 9694e2722c8be33ef507aad5fcdbef2cfb16f5e8 Mon Sep 17 00:00:00 2001 From: xuyanfeng Date: Sun, 4 Apr 2021 19:21:17 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96prop=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/package.json | 8 +- .../src/devtools/ccType/NodeBaseProperty.vue | 76 +-------- source/src/devtools/data.ts | 149 ++++++++++++++++++ source/src/devtools/index.vue | 23 +-- 4 files changed, 158 insertions(+), 98 deletions(-) create mode 100644 source/src/devtools/data.ts diff --git a/source/package.json b/source/package.json index f8c8350..8af876d 100644 --- a/source/package.json +++ b/source/package.json @@ -5,8 +5,8 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "build-watch": "vue-cli-service build --watch", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "build-watch": "vue-cli-service build --watch" }, "dependencies": { "@types/fs-extra": "^9.0.9", @@ -37,8 +37,8 @@ "lint-staged": "^9.5.0", "prettier": "^2.2.1", "typescript": "~4.1.5", - "vue-template-compiler": "^2.6.11", - "vue-cli-plugin-browser-extension": "latest" + "vue-cli-plugin-browser-extension": "latest", + "vue-template-compiler": "^2.6.11" }, "browserslist": [ "> 1%", diff --git a/source/src/devtools/ccType/NodeBaseProperty.vue b/source/src/devtools/ccType/NodeBaseProperty.vue index 93f3b1f..c940f8f 100644 --- a/source/src/devtools/ccType/NodeBaseProperty.vue +++ b/source/src/devtools/ccType/NodeBaseProperty.vue @@ -19,7 +19,7 @@ import Vue from "vue" import {Component, Prop} from "vue-property-decorator" import UiProp from "./ui-prop.vue" -import {DataType} from "../data"; +import {DataType, testData} from "../data"; @Component({ components: {UiProp}, @@ -27,7 +27,7 @@ import {DataType} from "../data"; export default class NodeBaseProperty extends Vue { name: string = "node-base" - @Prop() + @Prop({default: () => testData,}) allGroup: Array> | undefined; onClickHeader(group) { @@ -44,83 +44,11 @@ export default class NodeBaseProperty extends Vue { } created() { - this.setTestData() this.allGroup.forEach(item => { this.$set(item, 'fold', false); }) } - setTestData() { - this.allGroup = [ - { - name: "group1", - data: [ - {name: "uuid", value: {type: DataType.String, data: 'abc'}}, - {name: "opacity", value: {type: DataType.Number, data: 100}}, - - { - name: "size", - value: { - type: DataType.Vec2, - data: [ - {name: "X", value: {type: DataType.Number, data: 100}}, - {name: "Y", value: {type: DataType.Number, data: 200}}, - ] - } - }, - { - name: "position", - value: { - type: DataType.Vec3, - data: [ - {name: "X", value: {type: DataType.Number, data: 100}}, - {name: "Y", value: {type: DataType.Number, data: 200}}, - {name: "Z", value: {type: DataType.Number, data: 300}}, - ] - } - }, - { - name: "layout", - value: { - type: DataType.Enum, - data: 1, - values: [ - {name: "horizontal", value: 1}, - {name: "vertical", value: 2}, - ] - } - }, - { - name: "text", - value: { - type: DataType.Text, - data: 'aaaaaaaaafsf', - } - } - ] - }, - { - name: "group2", - data: [ - { - name: "bool", value: { - type: DataType.Bool, - data: true, - } - }, - { - name: 'color', - value: { - type: DataType.Color, - data: '#ff0000' - } - } - ] - }, - ]; - - } - changeSizeActionWidth(step: number) { let w = parseFloat(this.itemData.width); // this.itemData.width = w + step; diff --git a/source/src/devtools/data.ts b/source/src/devtools/data.ts new file mode 100644 index 0000000..9f1e340 --- /dev/null +++ b/source/src/devtools/data.ts @@ -0,0 +1,149 @@ +export enum DataType { + Number, + String, + Text, + Vec2, + Vec3, + Enum, + Bool, + Color, +} + +class Info { + public type: DataType = DataType.Number; +} + +export class TextData extends Info { + constructor() { + super(); + this.type = DataType.Text; + } +} + +export class StringData extends Info { + constructor() { + super(); + this.type = DataType.String; + } +} + +export class NumberData extends Info { + constructor() { + super(); + this.type = DataType.Number; + } + +} + +export class Vec2Data extends Info { + public v1: number = 0; + public v2: number = 0; + + constructor(v1: number, v2: number) { + super(); + this.type = DataType.Vec2 + this.v1 = v1; + this.v2 = v2; + } +} + +export class Vec3Data extends Info { + public v1: number = 0; + public v2: number = 0; + public v3: number = 0; + + constructor(v1: number, v2: number, v3: number) { + super(); + this.type = DataType.Vec3 + this.v1 = v1; + this.v2 = v2; + this.v3 = v3; + } +} + +export class EnumData extends Info { + constructor() { + super(); + this.type = DataType.Enum; + } + +} + +class NodeInfo { + public type: string = ''; // 类型 + + +} + +class CompInfo { + +} + +export const testData = [ + { + name: "group1", + data: [ + {name: "uuid", value: {type: DataType.String, data: 'abc'}}, + {name: "opacity", value: {type: DataType.Number, data: 100}}, + + { + name: "size", + value: { + type: DataType.Vec2, + data: [ + {name: "X", value: {type: DataType.Number, data: 100}}, + {name: "Y", value: {type: DataType.Number, data: 200}}, + ] + } + }, + { + name: "position", + value: { + type: DataType.Vec3, + data: [ + {name: "X", value: {type: DataType.Number, data: 100}}, + {name: "Y", value: {type: DataType.Number, data: 200}}, + {name: "Z", value: {type: DataType.Number, data: 300}}, + ] + } + }, + { + name: "layout", + value: { + type: DataType.Enum, + data: 1, + values: [ + {name: "horizontal", value: 1}, + {name: "vertical", value: 2}, + ] + } + }, + { + name: "text", + value: { + type: DataType.Text, + data: 'aaaaaaaaafsf', + } + } + ] + }, + { + name: "group2", + data: [ + { + name: "bool", value: { + type: DataType.Bool, + data: true, + } + }, + { + name: 'color', + value: { + type: DataType.Color, + data: '#ff0000' + } + } + ] + }, +]; + diff --git a/source/src/devtools/index.vue b/source/src/devtools/index.vue index 893bfd9..1b725c0 100644 --- a/source/src/devtools/index.vue +++ b/source/src/devtools/index.vue @@ -28,13 +28,8 @@
-
- - - -
+
-
未发现cocos creator的游戏! @@ -421,21 +416,9 @@ export default class Index extends Vue { .right { flex: 2; + background: #e5e9f2; + overflow: scroll; } } } - - -.treeInfo { - height: 100% -} - -.bg-purple { - background: #d3dce6; -} - - -.bg-purple-light { - background: #e5e9f2; -}