Commit a1b1e8a775409e7b76a29348e21869814380219e

Authored by fengwotao
1 parent bd5412cc

perf(src/packages): 优化自定义网页全屏图标展示

@@ -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>