From f999acdaafc1b8d2d2b67eaa77474db74afc9ff9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 26 Aug 2021 18:33:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=87=E5=AD=97=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=80=8F=E8=A7=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/components/TextAttr.vue | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index 97ac4b741d..04281743e1 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -41,6 +41,14 @@
         <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" @change="styleChange" />
       </div>
 
+      <el-tooltip :content="$t('panel.opacity')">
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-touming" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="innerOpacity" type="number" size="mini" min="0" max="100" step="10" @change="styleChange" />
+      </div>
+
       <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
           <el-tooltip :content="$t('panel.color')">
@@ -79,6 +87,7 @@ export default {
   },
   data() {
     return {
+      innerOpacity: 0,
       textAlignOptions: [
         {
           icon: 'iconfont icon-juzuo',
@@ -97,8 +106,19 @@ export default {
         }
       ] }
   },
+  watch: {
+    innerOpacity: {
+      handler(oldVal, newVal) {
+        this.styleInfo['opacity'] = this.innerOpacity / 100
+      }
+    }
+  },
+  mounted() {
+    if (this.styleInfo['opacity']) {
+      this.innerOpacity = this.styleInfo['opacity'] * 100
+    }
+  },
   computed: {
-
     letterDivColor() {
       const style = {
         height: '2px',
@@ -153,7 +173,7 @@ export default {
         ps = x + 60
       }
       // 防止toolbar超出边界
-      const xGap = ps + 395 - this.canvasWidth
+      const xGap = ps + 495 - this.canvasWidth
       // console.log('canvasWidth:' + this.canvasWidth + ';xGap:' + xGap)
       if (xGap > 0) {
         return ps - xGap
@@ -185,7 +205,7 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 10;
-    width: 450px;
+    width: 550px;
     position: absolute;
 
   }