From 88c2167d612898882bc994dab7e2a5db6cbd942a Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Thu, 5 Aug 2021 21:46:19 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B6=85=E9=93=BE=E6=8E=A5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Canvas/Operate/LinkHandler.vue | 13 ++++++++++---
 src/views/Screen/ScreenElement.vue              |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/views/Editor/Canvas/Operate/LinkHandler.vue b/src/views/Editor/Canvas/Operate/LinkHandler.vue
index 8996cd1a..0eb45201 100644
--- a/src/views/Editor/Canvas/Operate/LinkHandler.vue
+++ b/src/views/Editor/Canvas/Operate/LinkHandler.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="link-handler">
+  <div class="link-handler" :style="{ top: elementInfo.height * canvasScale + 10 + 'px' }">
     <a class="link" :href="elementInfo.link" target="_blank">{{elementInfo.link}}</a>
     <div class="btns">
       <div class="btn" @click="openLinkDialog()">更换</div>
@@ -10,7 +10,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
+import { useStore } from '@/store'
 import { PPTElement } from '@/types/slides'
 import useLink from '@/hooks/useLink'
 
@@ -27,9 +28,13 @@ export default defineComponent({
     },
   },
   setup() {
+    const store = useStore()
+    const canvasScale = computed(() => store.state.canvasScale)
+
     const { removeLink } = useLink()
 
     return {
+      canvasScale,
       removeLink,
     }
   },
@@ -40,7 +45,6 @@ export default defineComponent({
 .link-handler {
   height: 30px;
   position: absolute;
-  top: -36px;
   left: 0;
   font-size: 12px;
   padding: 0 10px;
@@ -51,9 +55,12 @@ export default defineComponent({
   color: $themeColor;
 }
 .link {
+  max-width: 300px;
   margin-right: 20px;
   word-break: keep-all;
   white-space: nowrap;
+
+  @include ellipsis-oneline();
 }
 .btns {
   display: flex;
diff --git a/src/views/Screen/ScreenElement.vue b/src/views/Screen/ScreenElement.vue
index 2c9b09b5..e9e79e44 100644
--- a/src/views/Screen/ScreenElement.vue
+++ b/src/views/Screen/ScreenElement.vue
@@ -9,6 +9,7 @@
       fontFamily: theme.fontName,
       visibility: needWaitAnimation ? 'hidden' : 'visible',
     }"
+    :title="elementInfo.link || ''"
     @click="openLink()"
   >
     <component