博客 | NPM地址 | git源码 | gitee源码

此工具就是利用transfrom：scale来缩放页面已达到自适应

安装

npm install yg-screen-scale

使用

通常是在项目app.vue中引入
import BigScreenScale from 'yg-screen-scale'
  ...
  data() {
    return {
      // 定义缩放对象
      BigScreenScale: null
    }
  },
  mounted() {
    // 初始化
    this.BigScreenScale = new BigScreenScale({container: 'app'}, (scale) => {
      console.log(scale);
    })
  },
  beforeDestroy() {
    // 移除监听
    this.BigScreenScale.clearListener()
  }
  ...

参数说明

初始化方法里面包括两个参数， 第一个是配置options，第二个是回调函数（会返回缩放的scale）， options配置 | 名称 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- | | container|string| 否 | 缩放的外层容器一般是app.vue中router-view的外层容器id值， 默认'app' | | time|number| 否 | 页面缩放后盒子修改的时间，单位ms 默认为500 防抖动时间 | | width|number| 否 | 设计图宽度单位px，默认1920 | | height|number| 否 | 设计图高度单位px，默认1080 | | type|number| 否 | 缩放的类型，1 等比缩放，2 宽度缩放，3 高度缩放，4 宽高各自缩放 | | align|string| 否 | 缩放后盒子的位置，默认'center', 居中显示， 其他字符串上面留白为空 |

注意事项

container 元素默认样式会被修改成overflow：hidden; position: absolute;

由于缩放页面导致使用百度地图的时候可能某些功能异常，需要对应的地图盒子进行相反的比例缩放比如外层的页面scale是0.5 地图就得缩放比例就得是2