From 1b0deff1d7449fd97c9a08c69d65816d6468463f Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 7 Feb 2021 17:32:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=9B=BE=E7=89=87=E7=BF=BB=E8=BD=ACUI?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ElementStylePanel/ImageStylePanel.vue     | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 8ed0029a..ca3116b8 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -59,24 +59,18 @@
       <Button class="full-width-btn"><IconColorFilter class="btn-icon" /> 设置滤镜</Button>
     </Popover>
     
-    <div class="row">
-      <div style="flex: 2;">水平翻转：</div>
-      <div class="switch-wrapper" style="flex: 3;">
-        <Switch 
-          :checked="flip.x === 180" 
-          @change="checked => updateImage({ flip: { x: checked ? 180 : 0, y: flip.y } })" 
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div style="flex: 2;">垂直翻转：</div>
-      <div class="switch-wrapper" style="flex: 3;">
-        <Switch 
-          :checked="flip.y === 180" 
-          @change="checked => updateImage({ flip: { x: flip.x, y: checked ? 180 : 0 } })" 
-        />
-      </div>
-    </div>
+    <CheckboxButtonGroup class="row">
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="flip.x === 180"
+        @click="updateImage({ flip: { x: flip.x === 180 ? 0 : 180, y: flip.y } })"
+      ><IconFlipVertically /> 水平翻转</CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="flip.y === 180"
+        @click="updateImage({ flip: { x: flip.x, y: flip.y === 180 ? 0 : 180 } })"
+      ><IconFlipHorizontally /> 垂直翻转</CheckboxButton>
+    </CheckboxButtonGroup>
 
     <Divider />
     <ElementOutline />