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