From 1ea8c4a4603afc54a108d36be462e0bc41be2f0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Thu, 16 Apr 2020 15:02:50 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20add-param-box=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=9A=84=E6=96=87=E5=AD=97=E6=94=B9=E6=88=90=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/rightBox/editEndpointBox.vue          | 16 ++++++++++++----
 .../src/components/common/rightBox/moduleBox.vue | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 813d38041..44e6d92a8 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -130,10 +130,10 @@
               <div class="right-box-form-btns" v-if="rightBox.isEdit">
                 <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
                 <button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
+                  <span><i class="el-icon-delete"></i></span>
                 </button>
-                <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                  <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+                <button type="button" id="edit-add-param" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
                 </button>
               </div>
             </template>
@@ -251,17 +251,25 @@
       // 清除param
       clearAllParam() {
         this.endpoint.paramObj = [];
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       // 新增param
       addParam() {
         this.endpoint.paramObj.push({key: '', value: ''});
-        this.$refs.paramBoxScrollbar.update();
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       // 移除单个param
       removeParam(index) {
         this.endpoint.paramObj.splice(index, 1);
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       //将param转为json字符串格式
diff --git a/nezha-fronted/src/components/common/rightBox/moduleBox.vue b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
index 50fad4015..c0e02e8dd 100644
--- a/nezha-fronted/src/components/common/rightBox/moduleBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/moduleBox.vue
@@ -256,10 +256,10 @@
               <div class="right-box-form-btns" v-if="rightBox.isEdit">
                 <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
                 <button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
-                  <span class="top-tool-btn-txt">{{$t('overall.clear')}}</span>
+                  <span><i class="el-icon-delete"></i></span>
                 </button>
-                <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
-                  <span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
+                <button id="module-add-param" type="button" @click="addParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
+                  <span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
                 </button>
               </div>
             </template>
@@ -610,17 +610,25 @@
       // 清除param
       clearAllParam: function() {
         this.currentModule.paramObj = [];
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       // 新增param
       addParam: function() {
         this.currentModule.paramObj.push({key: '', value: ''});
-        this.$refs.paramBoxScrollbar.update();
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       // 移除单个param
       removeParam: function(index) {
         this.currentModule.paramObj.splice(index, 1);
+        this.$nextTick(() => {
+          this.$refs.paramBoxScrollbar.update();
+        });
       },
 
       //将param转为json字符串格式