fix(Demo): 修复窗口缩放时，底部 demo-block-control 的宽度和位置不准确问题

xinlei3166 · Oct 6, 2021 · d039003 · d039003
1 parent d111b9f
commit d039003
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/components/Demo.vue b/components/Demo.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="demoBlock"
     :class="['demo-block', blockClass, customClass ? customClass : '', { hover }]"
     @mouseenter="hover = true"
     @mouseleave="hover = false"
@@ -116,6 +117,7 @@ export default {
     const description = ref(null)
     const meta = ref(null)
     const control = ref(null)
+    const demoBlock = ref(null)
 
     const codeAreaHeight = computed(() => {
       if (description.value) {
@@ -129,10 +131,12 @@ export default {
       const innerHeight = window.innerHeight || document.body.clientHeight
       fixedControl.value = bottom > innerHeight && top + 44 <= innerHeight
       control.value.style.left = fixedControl.value ? `${left}px` : '0'
+      control.value.style.width = `${demoBlock.value.offsetWidth}px`
     }
     const scrollHandler = throttle(_scrollHandler, 200)
     const removeScrollHandler = () => {
       window.removeEventListener('scroll', scrollHandler)
+      window.removeEventListener('resize', scrollHandler)
     }
 
     const onCopy = () => {
@@ -155,6 +159,7 @@ export default {
       }
       setTimeout(() => {
         window.addEventListener('scroll', scrollHandler)
+        window.addEventListener('resize', scrollHandler)
         _scrollHandler()
       }, 300)
     })
@@ -183,7 +188,8 @@ export default {
       description,
       meta,
       control,
-      onCopy
+      onCopy,
+      demoBlock
     }
   }
 }
@@ -245,7 +251,7 @@ export default {
 .demo-block-control.is-fixed {
   position: fixed;
   bottom: 0;
-  width: calc(100% - 320px - 48px - 200px - 1px);
+  /* width: calc(100% - 320px - 48px - 200px - 1px); */
   border-right: solid 1px #eaeefb;
   z-index: 1;
 }