瀏覽代碼

fix:页面下载提示定位修改

zhangsiya 1 年之前
父節點
當前提交
7d02868c61
共有 1 個文件被更改,包括 32 次插入2 次删除
  1. 32 2
      apps/bigmember_pc/src/components/download-report/DownloadBottomTip.vue

+ 32 - 2
apps/bigmember_pc/src/components/download-report/DownloadBottomTip.vue

@@ -20,12 +20,13 @@
           </slot>
         </span>
       </template>
-      <span class="iconfont icon-close" @click="hiddenTip"></span>
+<!--      <span class="iconfont icon-close" @click="hiddenTip"></span>-->
     </div>
   </el-collapse-transition>
 </template>
 
 <script>
+import { debounce, throttle } from 'lodash'
 export default {
   props: {
     typeText:{
@@ -50,6 +51,17 @@ export default {
       showTip: true
     }
   },
+  mounted () {
+    this.$on('hook:mounted', () => {
+      // dom插入到根元素
+      window.addEventListener('scroll', this.windowScrollFn)
+      window.addEventListener('resize', this.windowScrollFn)
+    })
+    this.$on('hook:destroyed', () => {
+      window.removeEventListener('scroll', this.windowScrollFn)
+      window.removeEventListener('resize', this.windowScrollFn)
+    })
+  },
   methods: {
     hiddenTip () {
       this.showTip = !this.showTip
@@ -59,7 +71,25 @@ export default {
     },
     downloadReport () {
       this.$emit('downloadReport')
-    }
+    },
+    windowScrollFn: throttle (function () {
+      const $ = this.$querySelector.bind(this)
+      const stickyFooter = $(this.$el)
+      // 吸底
+      // 如果距离底部
+      const bottomFooter = document.querySelector('.j-bottom')
+      let ob = { top: 0 }
+      if (bottomFooter) {
+        ob = bottomFooter.getBoundingClientRect()
+      }
+      // bottom出现在视口
+      const bottom = window.innerHeight - ob.top
+      if (bottom > 0 && ob.top !== 0) {
+        $(this.$el).css({ bottom: parseInt(bottom) })
+      } else {
+        $(this.$el).css({ bottom: 0 })
+      }
+    })
   }
 }
 </script>