Commit a1b1e8a775409e7b76a29348e21869814380219e

Authored by fengwotao
1 parent bd5412cc

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

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