Commit 1f37e9ed79ef70842a11e14044b769e1cef6e998
1 parent
24f4ae70
feat(packages/external): 重写远程网页,新增全屏按钮
Showing
1 changed file
with
11 additions
and
8 deletions
1 | <template> | 1 | <template> |
2 | - <div :style="getStyle(borderRadius)"> | 2 | + <div class="iframe-content" :style="getStyle(borderRadius)"> |
3 | <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button"> | 3 | <div v-show="isShowSvg" @click="handleFullScreen" class="fullscreen-button"> |
4 | <svg | 4 | <svg |
5 | focusable="false" | 5 | focusable="false" |
@@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
19 | <iframe | 19 | <iframe |
20 | @mouseenter="handleMouseenter" | 20 | @mouseenter="handleMouseenter" |
21 | @mouseleave="handleMouseleave" | 21 | @mouseleave="handleMouseleave" |
22 | - id="iframe-content" | 22 | + id="iframeContent" |
23 | :src="option.dataset" | 23 | :src="option.dataset" |
24 | :width="w" | 24 | :width="w" |
25 | :height="h" | 25 | :height="h" |
@@ -75,7 +75,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { | @@ -75,7 +75,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => { | ||
75 | }) | 75 | }) |
76 | 76 | ||
77 | const handleFullScreen = () => { | 77 | const handleFullScreen = () => { |
78 | - const domName = document.getElementById('iframe-content') as HTMLElement | 78 | + const domName = document.getElementById('iframeContent') as HTMLElement |
79 | const htmlName = document.querySelector('html') as HTMLHtmlElement | 79 | const htmlName = document.querySelector('html') as HTMLHtmlElement |
80 | useFullScreen(domName, htmlName) | 80 | useFullScreen(domName, htmlName) |
81 | } | 81 | } |
@@ -85,10 +85,13 @@ const handleMouseleave = () => (isShowSvg.value = false) | @@ -85,10 +85,13 @@ const handleMouseleave = () => (isShowSvg.value = false) | ||
85 | </script> | 85 | </script> |
86 | 86 | ||
87 | <style lang="scss" scoped> | 87 | <style lang="scss" scoped> |
88 | -.fullscreen-button { | ||
89 | - cursor: pointer; | ||
90 | - position: absolute; | ||
91 | - right: 0; | ||
92 | - top: 0; | 88 | +.iframe-content { |
89 | + position: relative; | ||
90 | + .fullscreen-button { | ||
91 | + cursor: pointer; | ||
92 | + position: absolute; | ||
93 | + right: 0; | ||
94 | + top: 0; | ||
95 | + } | ||
93 | } | 96 | } |
94 | </style> | 97 | </style> |