Showing
1 changed file
with
11 additions
and
15 deletions
| @@ -5,8 +5,8 @@ | @@ -5,8 +5,8 @@ | ||
| 5 | focusable="false" | 5 | focusable="false" |
| 6 | class="" | 6 | class="" |
| 7 | data-icon="fullscreen" | 7 | data-icon="fullscreen" |
| 8 | - width="2.3vw" | ||
| 9 | - height="2.3vh" | 8 | + width="4vw" |
| 9 | + height="4vh" | ||
| 10 | fill="currentColor" | 10 | fill="currentColor" |
| 11 | aria-hidden="true" | 11 | aria-hidden="true" |
| 12 | viewBox="64 64 896 896" | 12 | viewBox="64 64 896 896" |
| @@ -23,6 +23,7 @@ | @@ -23,6 +23,7 @@ | ||
| 23 | :src="option.dataset" | 23 | :src="option.dataset" |
| 24 | :width="w" | 24 | :width="w" |
| 25 | :height="h" | 25 | :height="h" |
| 26 | + :allowfullscreen="allowfullscreen" | ||
| 26 | style="border-width: 0" | 27 | style="border-width: 0" |
| 27 | ></iframe> | 28 | ></iframe> |
| 28 | </div> | 29 | </div> |
| @@ -44,6 +45,8 @@ const props = defineProps({ | @@ -44,6 +45,8 @@ const props = defineProps({ | ||
| 44 | 45 | ||
| 45 | const isShowSvg = ref(false) | 46 | const isShowSvg = ref(false) |
| 46 | 47 | ||
| 48 | +const allowfullscreen = ref(false) | ||
| 49 | + | ||
| 47 | const { w, h } = toRefs(props.chartConfig.attr) | 50 | const { w, h } = toRefs(props.chartConfig.attr) |
| 48 | const { borderRadius } = toRefs(props.chartConfig.option) | 51 | const { borderRadius } = toRefs(props.chartConfig.option) |
| 49 | 52 | ||
| @@ -80,29 +83,22 @@ const handleFullScreen = () => { | @@ -80,29 +83,22 @@ const handleFullScreen = () => { | ||
| 80 | useFullScreen(domName, htmlName) | 83 | useFullScreen(domName, htmlName) |
| 81 | } | 84 | } |
| 82 | 85 | ||
| 83 | -const handleMouseenter = () => (isShowSvg.value = true) | 86 | +const handleMouseenter = () => { |
| 87 | + isShowSvg.value = true | ||
| 88 | + allowfullscreen.value = true | ||
| 89 | +} | ||
| 90 | + | ||
| 84 | const handleMouseleave = () => (isShowSvg.value = false) | 91 | const handleMouseleave = () => (isShowSvg.value = false) |
| 85 | </script> | 92 | </script> |
| 86 | - | ||
| 87 | <style lang="scss" scoped> | 93 | <style lang="scss" scoped> |
| 88 | .iframe-content { | 94 | .iframe-content { |
| 89 | - position: relative; | ||
| 90 | #fullscreenButton { | 95 | #fullscreenButton { |
| 91 | color: white; | 96 | color: white; |
| 92 | cursor: pointer; | 97 | cursor: pointer; |
| 93 | position: absolute; | 98 | position: absolute; |
| 94 | z-index: 999999; | 99 | z-index: 999999; |
| 95 | top: 3%; | 100 | top: 3%; |
| 96 | - left: 50%; | ||
| 97 | - transform: translateX(-50%); | ||
| 98 | - } | ||
| 99 | - iframe:fullscreen { | ||
| 100 | - width: 100vw; | ||
| 101 | - height: 100vh; | ||
| 102 | - } | ||
| 103 | - iframe::backdrop { | ||
| 104 | - width: 100vw; | ||
| 105 | - height: 100vh; | 101 | + right: 0.1vw; |
| 106 | } | 102 | } |
| 107 | } | 103 | } |
| 108 | </style> | 104 | </style> |