From 038ff8f16cdfdaf6b07f28d65e0ea09ebb56e265 Mon Sep 17 00:00:00 2001
From: Echo <nts318@yeah.net>
Date: Sat, 16 Oct 2021 22:30:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=A9=BF=E6=A2=AD?=
 =?UTF-8?q?=E6=A1=86=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E4=B8=8D=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/transfer/src/transfer-operation.tsx | 12 ++++++---
 devui/transfer/src/transfer.scss          | 31 ++---------------------
 docs/components/transfer/index.md         | 19 ++++++++++----
 3 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/devui/transfer/src/transfer-operation.tsx b/devui/transfer/src/transfer-operation.tsx
index 7bb73068..388024b4 100644
--- a/devui/transfer/src/transfer-operation.tsx
+++ b/devui/transfer/src/transfer-operation.tsx
@@ -12,9 +12,15 @@ export default defineComponent({
         return () => {
             return ctx.slots.operation && ctx.slots.operation() || <div class="devui-transfer-panel-operation">
                 <div class="devui-transfer-panel-operation-group">
-                    <DButton class="devui-transfer-panel-operation-group-left icon-collapse" disabled={props.disabled ? props.disabled : props.sourceDisabled}
-                        btnClick={() => ctx.emit('updateSourceData')}></DButton>
-                    <DButton class="devui-transfer-panel-operation-group-right icon-chevron-right" disabled={props.disabled ? props.disabled : props.targetDisabled} btnClick={() => ctx.emit('updateTargetData')}></DButton>
+                    <DButton
+                        class="devui-transfer-panel-operation-group-left"
+                        disabled={props.disabled ? props.disabled : props.sourceDisabled}
+                        onClick={() => ctx.emit('updateSourceData')}>
+                        <span class="icon-collapse"></span>
+                    </DButton>
+                    <DButton class="devui-transfer-panel-operation-group-right" disabled={props.disabled ? props.disabled : props.targetDisabled} onClick={() => ctx.emit('updateTargetData')}>
+                        <span class="icon-chevron-right"></span>
+                    </DButton>
                 </div>
             </div>
         }
diff --git a/devui/transfer/src/transfer.scss b/devui/transfer/src/transfer.scss
index 4088f01c..9328c50e 100644
--- a/devui/transfer/src/transfer.scss
+++ b/devui/transfer/src/transfer.scss
@@ -80,15 +80,11 @@ $devui-transfer-body-list-item-height: 36px;
       &-group {
         width: 36px;
 
-        &-left,
-        &-right {
+        &-left .devui-btn,
+        &-right .devui-btn {
           width: 36px;
           height: 36px;
-          color: $devui-light-text;
-          background: $devui-primary;
           border-radius: 50%;
-          border: none;
-          cursor: pointer;
           padding: 0;
           min-width: 36px !important;
         }
@@ -96,29 +92,6 @@ $devui-transfer-body-list-item-height: 36px;
         &-right {
           margin-top: 12px;
         }
-
-        &-left:hover,
-        &-left span:hover,
-        &-right:hover,
-        &-right span:hover {
-          background: $devui-primary-hover;
-        }
-
-        &-left:active,
-        &-left span:active,
-        &-right:active,
-        &-right span:active {
-          background: $devui-primary-active;
-        }
-
-        &-left:disabled,
-        &-left span:disabled,
-        &-right:disabled,
-        &-right span:disabled {
-          color: $devui-disabled-text;
-          background: $devui-disabled-bg;
-          cursor: not-allowed;
-        }
       }
     }
   }
diff --git a/docs/components/transfer/index.md b/docs/components/transfer/index.md
index 72eede1e..304c507f 100644
--- a/docs/components/transfer/index.md
+++ b/docs/components/transfer/index.md
@@ -149,11 +149,10 @@ export default defineComponent({
       </div>
     </template>
     <template #operation>
-      <div class="devui-transfer-panel-operation">
-        <div class="devui-transfer-panel-operation-group">
-          <DButton class="devui-transfer-panel-operation-group-left" :disabled="leftOptions.disabled"
-            :btnClick="updateRightFilterData" >Left</DButton>
-          <DButton class="devui-transfer-panel-operation-group-right" :disabled="rightOptions.disabled" :btnClick="updateLeftFilterData">Right</DButton>
+      <div class="custom-transfer__operation">
+        <div class="custom-transfer__operation__group">
+          <DButton :disabled="leftOptions.disabled" @Click="updateRightFilterData" >Left</DButton>
+          <DButton style="margin-top: 12px;" :disabled="rightOptions.disabled" @click="updateLeftFilterData">Right</DButton>
         </div>
       </div>
     </template>
@@ -357,6 +356,16 @@ export default defineComponent({
 .custom-transfer__header, .custom-transfer__body__list {
   padding: 0 10px;
 }
+.custom-transfer__operation {
+  display: flex;
+  width: 10%;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+.custom-transfer__operation__group , .custom-transfer__operation__group .devui-btn{
+  width: 64px;
+}
 </style>
 ```
 
-- 
Gitee