CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-19 16:38:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化prop组件

Browse Source
This commit is contained in:
xuyanfeng 2021-04-04 19:04:55 +08:00
parent f263bb1db6
commit 1ff89fd8ec
1 changed files with 45 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
source/src/devtools/ccType/ui-prop.vue
View File

@ -34,7 +34,11 @@
:value="opt.value"> :value="opt.value">
</el-option> </el-option>
</el-select> </el-select>
<el-checkbox v-model="value.data" v-if="isBool()"></el-checkbox>
<div class="color" v-if="isColor()">
<el-color-picker style="position: absolute;" v-model="value.data"></el-color-picker>
<div class="hex" :style="{color:colorReverse(value.data)}">{{ value.data }}</div>
</div>
<div class="slot"> <div class="slot">
<slot></slot> <slot></slot>
</div> </div>
@ -43,10 +47,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue" import Vue from "vue"
import {Component, Prop} from "vue-property-decorator" import {Component, Prop} from "vue-property-decorator"
import {DataType} from '../data'
@Component({}) @Component({
components: {}
})
export default class UiProp extends Vue { export default class UiProp extends Vue {
@Prop({default: ""}) @Prop({default: ""})
name: string | undefined; name: string | undefined;
@ -56,27 +64,35 @@ export default class UiProp extends Vue {
value: Record<string, any> | undefined | any; value: Record<string, any> | undefined | any;
isString() { isString() {
return this.value && (this.value.type === 'string'); return this.value && (this.value.type === DataType.String);
} }
isText() { isText() {
return this.value && (this.value.type === 'text'); return this.value && (this.value.type === DataType.Text);
} }
isNumber() { isNumber() {
return this.value && (this.value.type === 'number'); return this.value && (this.value.type === DataType.Number);
} }
isVec2() { isVec2() {
return this.value && (this.value.type === 'vec2'); return this.value && (this.value.type === DataType.Vec2);
} }
isVec3() { isVec3() {
return this.value && (this.value.type === 'vec3'); return this.value && (this.value.type === DataType.Vec3);
} }
isEnum() { isEnum() {
return this.value && (this.value.type === 'enum'); return this.value && (this.value.type === DataType.Enum);
}
isBool() {
return this.value && (this.value.type === DataType.Bool);
}
isColor() {
return this.value && (this.value.type === DataType.Color);
} }
created() { created() {
@ -94,6 +110,12 @@ export default class UiProp extends Vue {
document.addEventListener("onselectstart", this._onSelect); document.addEventListener("onselectstart", this._onSelect);
} }
colorReverse(OldColorValue) {
OldColorValue = "0x" + OldColorValue.replace(/#/g, "");
var str = "000000" + (0xFFFFFF - OldColorValue).toString(16);
return '#' + str.substring(str.length - 6, str.length);
}
_onSelect() { _onSelect() {
return false; return false;
} }
@ -150,11 +172,26 @@ export default class UiProp extends Vue {
.value { .value {
flex: 3; flex: 3;
text-align: left; text-align: left;
height: 100%;
.color {
position: relative;
height: 30px;
.hex {
line-height: 30px;
position: relative;
text-align: center;
user-select: none;
pointer-events: none;
}
}
.vec { .vec {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
#ui-prop { #ui-prop {
margin-top: 0; margin-top: 0;