perf:explore unit选择功能补充

nezha-fronted/src/components/common/chartUnit.vue

@@ -1,13 +1,17 @@
 <template>
-    <el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
-                 :options="chartUnits"
-                 class="chart-unit"
-                 :props="{ expandTrigger: 'click' ,emitPath:false}"
-                 :show-all-levels="false"
-                 v-model="unit"
-                 @change="unitSelected"
-    >
-    </el-cascader>
+    <div style="display: flex;justify-content: flex-start">
+      <button class="input-prepend nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="openSeletor">{{$t('dashboard.panel.chartForm.unit')}}</button>
+      <el-cascader filterable placeholder="" popper-class="no-style-class unit-pop-class" size="mini"
+                   :options="chartUnits"
+                   class="chart-unit"
+                   :props="{ expandTrigger: 'click' ,emitPath:false}"
+                   :show-all-levels="false"
+                   v-model="unit"
+                   @change="unitSelected"
+                   ref="unitSelector"
+      >
+      </el-cascader>
+    </div>
 </template>
 
 <script>
@@ -36,6 +40,9 @@
         this.unit=value;
         this.$emit('change',this.unit);
       },
+      openSeletor:function(){
+        this.$refs.unitSelector.toggleDropDownVisible(!this.$refs.unitSelector.dropDownVisible);
+      }
     }
   }
 </script>
@@ -49,4 +56,11 @@
     height: 200px;
     background-color: #FFF;
   }
+  .input-prepend{
+    height: 26px;
+    margin-top: 1px;
+    padding:0 5px !important;
+    border-bottom-right-radius: 0px !important;
+    border-top-right-radius: 0px !important;
+  }
 </style>