优化prop组件

source/src/devtools/ccType/ui-prop.vue

@@ -1,16 +1,41 @@
 <template>
-  <div id="app" style="height: 30px;overflow: hidden;width: 100%;">
+  <div id="ui-prop">
-    <div style="width: 20%;float: left;background-color: #4a4a4a;text-align: left;"
+    <div @mousedown="onPropNameMouseDown" class="key">
-         @mousedown="changePositionMouseAction"
+      <div class="text">{{ name }}</div>
-         onselectstart="return false;"
-         class="noselect">
-      <span onselectstart="return false;" class="noselect font"
-            style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
-        {{ name }}
-      </span>
     </div>
-    <div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
+    <div class="value">
-      <div style="line-height: 30px;height: 100%;">
+      <el-input v-if="isString()" v-model="value.data"></el-input>
+      <el-input v-if="isText()"
+                type="textarea"
+                :autosize="{minRows:3,maxRows:5}"
+                placeholder="请输入内容"
+
+                v-model="value.data">
+      </el-input>
+      <el-input-number v-if="isNumber()"
+                       style="width: 100%;text-align: left"
+                       v-model="value.data"
+                       :step="step"
+                       controls-position="right"
+      ></el-input-number>
+
+      <div v-if="isVec2()||isVec3()" class="vec">
+        <ui-prop v-for="(vec, index) in value.data"
+                 :key="index"
+                 :value="vec.value"
+                 :name="vec.name">
+
+        </ui-prop>
+      </div>
+      <el-select v-model="value.data" v-if="isEnum()" style="width: 100%;">
+        <el-option v-for="(opt, index) in value.values"
+                   :key="index"
+                   :label="opt.name"
+                   :value="opt.value">
+        </el-option>
+      </el-select>
+
+      <div class="slot">
         <slot></slot>
       </div>
     </div>
@@ -26,12 +51,44 @@ export default class UiProp extends Vue {
   @Prop({default: ""})
   name: string | undefined;
 
+
+  @Prop()
+  value: Record<string, any> | undefined | any;
+
+  isString() {
+    return this.value && (this.value.type === 'string');
+  }
+
+  isText() {
+    return this.value && (this.value.type === 'text');
+  }
+
+  isNumber() {
+    return this.value && (this.value.type === 'number');
+  }
+
+  isVec2() {
+    return this.value && (this.value.type === 'vec2');
+  }
+
+  isVec3() {
+    return this.value && (this.value.type === 'vec3');
+  }
+
+  isEnum() {
+    return this.value && (this.value.type === 'enum');
+  }
+
+  created() {
+  }
+
   @Prop({default: 1})
   step: number | undefined;
 
+
   clientX: number = 0;
 
-  changePositionMouseAction(event: MouseEvent) {
+  onPropNameMouseDown(event: MouseEvent) {
     document.addEventListener("mousemove", this._onMouseMove);
     document.addEventListener("mouseup", this._onMouseUp);
     document.addEventListener("onselectstart", this._onSelect);
@@ -63,19 +120,57 @@ export default class UiProp extends Vue {
 };
 </script>
 
-<style scoped>
+<style scoped lang="less">
-.font {
+#ui-prop {
-  font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
+  margin: 0;
-}
+  min-height: 30px;
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-.noselect {
+
-  -webkit-touch-callout: none; /* iOS Safari */
+  .key {
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
+    flex: 1;
-  -khtml-user-select: none; /* Konqueror */
+    float: left;
-  -moz-user-select: none; /* Firefox */
+    text-align: left;
-  -ms-user-select: none; /* Internet Explorer/Edge */
+    display: flex;
-  user-select: none;
+    flex-direction: row;
-  /* Non-prefixed version, currently
+    align-items: center;
- not supported by any browser */
+
+    .text {
+      user-select: none;
+      line-height: 30px;
+      font-size: 12px;
+      margin: 3px;
+    }
+  }
+
+  .value {
+    flex: 3;
+    text-align: left;
+
+    .vec {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+
+      #ui-prop {
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-right: 20px;
+      }
+
+      #ui-prop:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .slot {
+      display: flex;
+      width: 100%;
+    }
+  }
 }
 </style>