NEZ-878 feat: 界面检测页面是否开启缩放，开启时友好提示

nezha-fronted/src/components/common/browserWindowZoom.vue

@@ -0,0 +1,134 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div v-show="browserWindowZoom" class="zoom">
+      <i class="nz-icon nz-icon-about-full"></i>
+      <span>{{$t('tip.zoomStatusPrompt')}}</span>
+      <button class="zoom-button" @click="doNotAskAgain">{{$t('tip.doNotAskAgain')}}</button>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'browserWindowZoom',
+  data () {
+    return {
+      browserWindowZoom: false,
+      timer: null,
+      flag: true
+    }
+  },
+  mounted () {
+    // 获取localStorage中的key值
+    const data = localStorage.getItem('browserZoom')
+    // 判断是否执行缩放弹框功能
+    if (data != 0) {
+      window.addEventListener('resize', this.browserZoom)
+    }
+  },
+  beforeDestroy () {
+    // 移除定时器
+    clearInterval(this.timer)
+  },
+  methods: {
+    doNotAskAgain () {
+      // 点击事件隐藏弹框
+      this.browserWindowZoom = false
+      // 存储localStorage的key值
+      localStorage.setItem('browserZoom', 0)
+      // 移除事件
+      window.removeEventListener('resize', this.browserZoom)
+    },
+    browserZoom () {
+      // 初始缩放比例
+      let originPixelRatio = localStorage.devicePixelRatio
+      if (!originPixelRatio) {
+        originPixelRatio = window.devicePixelRatio
+        // 整数才保存
+        if (Number.isInteger(originPixelRatio)) {
+          localStorage.devicePixelRatio = originPixelRatio
+        }
+      }
+      let lastPixelRatio = originPixelRatio
+      const currentPixelRatio = window.devicePixelRatio
+      if (currentPixelRatio !== lastPixelRatio) {
+        // console.log('缩放比例是：' + Math.round(1000 * (currentPixelRatio / originPixelRatio)) / 10 + '%');
+        // 计算缩放百分比
+        const zoom = Math.round(1000 * (currentPixelRatio / originPixelRatio)) / 10 + '%'
+        if (zoom != '100%') {
+          // 缩放时显示弹框
+          this.browserWindowZoom = true
+          let flag = true
+          // 防止重复触发
+          // 定时器5秒后隐藏弹框
+          if (flag === true) {
+            this.timer = setTimeout(() => {
+              this.browserWindowZoom = false
+            }, 5000)
+            flag = false
+          }
+          flag = true
+        }
+      }
+      // 记住上一次的设备像素比
+      lastPixelRatio = currentPixelRatio
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+  .zoom {
+    background: #F9F9F9;
+    border: 1px solid #DBDBDB;
+    border-radius: 2px;
+    width: 400px;
+    height: 108px;
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    top: 50px;
+    margin-left: -186px;
+    span {
+      font-family: Roboto-Regular;
+      margin-top: 15px;
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+      font-weight: 400;
+      width: 350px;
+      height: 40px;
+      margin-left: 40px;
+      display: inline-block;
+    }
+    i {
+      position: absolute;
+      color: #FA901C;
+      top: 15px;
+      left: 12px;
+    }
+    .zoom-button {
+      margin-top: 10px;
+      margin-left: 39px;
+      border: 1px solid #DBDBDB;
+      border-radius: 4px;
+      background-color: #F9F9F9;
+      color: #000;
+      font-style: italic;
+      font-weight: 900;
+      padding: 4px 10px;
+    }
+  }
+</style>