页面等比缩放

Mr.LRH大约 3 分钟

页面等比缩放

vueAutoResizeContainer 组件

/docs/.vuepress/components/vue2/vueAutoResizeContainer
  | --- index.vue
  | --- autoResize.js
  | --- util
  |      | --- index.js

vueAutoResizeContainer/index.vue

<template>
  <div id="fixed-screen-container" :ref="ref">
    <template v-if="ready">
      <slot></slot>
    </template>
  </div>
</template>

<script>
import autoResize from './autoResize.js';

export default {
  name: 'DvFullScreenContainer',
  mixins: [autoResize],
  props: {
    options: {
      type: Object,
    },
  },
  data() {
    return {
      ref: 'full-screen-container',
      allWidth: 0,
      allHeight: 0,
      scale: 0,
      datavRoot: '',
      ready: false,
    };
  },
  methods: {
    afterAutoResizeMixinInit() {
      this.initConfig();
      this.setAppScale();
      this.ready = true;
    },
    initConfig() {
      this.allWidth = this.width || this.originalWidth;
      this.allHeight = this.height || this.originalHeight;
      if (this.width && this.height) {
        this.dom.style.width = `${this.width}px`;
        this.dom.style.height = `${this.height}px`;
      } else {
        this.dom.style.width = `${this.originalWidth}px`;
        this.dom.style.height = `${this.originalHeight}px`;
      }
    },
    setAppScale() {
      const currentWidth = document.body.clientWidth;
      const currentHeight = document.body.clientHeight;
      this.dom.style.transform = `scale(${currentWidth /
        this.allWidth}, ${currentHeight / this.allHeight})`;
    },
    onResize() {
      this.setAppScale();
    },
  },
};
</script>

<style>
#fixed-screen-container {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: left top;
  z-index: 999;
}
</style>

vueAutoResizeContainer/autoResize.js

import { debounce, observerDomResize } from './util';

export default {
  data() {
    return {
      dom: '',
      width: 0,
      height: 0,
      originalWidth: 0,
      originalHeight: 0,
      debounceInitWHFun: '',
      domObserver: '',
    };
  },
  methods: {
    async autoResizeMixinInit() {
      await this.initWH(false);
      this.getDebounceInitWHFun();
      this.bindDomResizeCallback();
      if (typeof this.afterAutoResizeMixinInit === 'function')
        this.afterAutoResizeMixinInit();
    },
    // 初始化高度
    initWH(resize = true) {
      const { $nextTick, $refs, ref, onResize } = this;

      return new Promise((resolve) => {
        $nextTick((e) => {
          const dom = (this.dom = $refs[ref]);
          if (this.options) {
            const { width, height } = this.options;
            if (width && height) {
              this.width = width;
              this.height = height;
            }
          } else {
            this.width = dom.clientWidth;
            this.height = dom.clientHeight;
          }
          if (!this.originalWidth || !this.originalHeight) {
            const { width, height } = screen;
            this.originalWidth = width;
            this.originalHeight = height;
          }
          if (typeof onResize === 'function' && resize) onResize();
          resolve();
        });
      });
    },
    getDebounceInitWHFun() {
      this.debounceInitWHFun = debounce(100, this.initWH);
    },
    bindDomResizeCallback() {
      this.domObserver = observerDomResize(this.dom, this.debounceInitWHFun);
      window.addEventListener('resize', this.debounceInitWHFun);
    },
    unbindDomResizeCallback() {
      this.domObserver.disconnect();
      this.domObserver.takeRecords();
      this.domObserver = null;
      window.removeEventListener('resize', this.debounceInitWHFun);
    },
  },
  mounted() {
    this.autoResizeMixinInit();
  },
  beforeDestroy() {
    const { unbindDomResizeCallback } = this;
    unbindDomResizeCallback();
  },
};

vueAutoResizeContainer/util/index.js

export function randomExtend(minNum, maxNum) {
  if (arguments.length === 1) {
    return parseInt(Math.random() * minNum + 1, 10);
  } else {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
  }
}

// 防抖
export function debounce(delay, callback) {
  let lastTime;

  return function() {
    clearTimeout(lastTime);
    const [that, args] = [this, arguments];
    lastTime = setTimeout(() => {
      callback.apply(that, args);
    }, delay);
  };
}

export function observerDomResize(dom, callback) {
  const MutationObserver =
    window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;
  const observer = new MutationObserver(callback);
  observer.observe(dom, {
    attributes: true,
    attributeFilter: ['style'],
    attributeOldValue: true,
  });
  return observer;
}

export function getPointDistance(pointOne, pointTwo) {
  const minusX = Math.abs(pointOne[0] - pointTwo[0]);
  const minusY = Math.abs(pointOne[1] - pointTwo[1]);
  return Math.sqrt(minusX * minusX + minusY * minusY);
}

相关知识点

MutationObserver：监听DOM变动

MutationObserver 概述

MutationObserver API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

它等待所有脚本任务完成后，才会运行（即异步触发方式）。
它把 DOM 变动记录封装成一个数组进行处理，而不是一条条个别处理 DOM 变动。
它既可以观察 DOM 的所有类型变动，也可以指定只观察某一类变动

示例：连续在文档中插入1000个 DOM 元素，只有等1000个 DOM 元素结束之后才会触发 MutationObserver

事件与 MutationObserver 的区别：

事件：同步触发。
MutationObserver：异步触发。DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

MutationObserver 构造函数

使用 MutationObserver 构造函数，新建一个观察器实例，同时指定这个实例的回调函数。该回调函数接受两个参数：第一个是变动数组，第二个是观察器实例。

var observer = new MutationObserver(callback);

MutationObserver 实例方法

observe()：启动监听。第一个参数为所需要观察的 DOM 节点；第二个参数为配置对象，指定所要观察的变动类型（子节点变动和属性变动）。

var observer = new MutationObserver(callback);
var observerDom = document.querySelector('div');
var observeOptions = {
  'clidList': true, // 表示是否将该观察器应用于【子节点的变动（指新增，删除或者更改）】
  'attributes': true, // 表示是否将该观察器应用于【属性的变动】
  'characterData': true, // 表示是否将该观察器应用于【节点内容或节点文本的变动】
  'subtree': true, // 表示是否将该观察器应用于【该节点的所有后代节点】
  'attributeOldValue': true, // 表示观察 attributes 变动时，是否需要记录变动前的属性值
  'characterDataOldValue': true, // 表示观察 characterData 变动时，是否需要记录变动前的值
  'attributeFilter': ['class', 'src'] // 数组，表示需要观察的特定属性（比如['class', 'src']）
};

// 对同一节点多次添加观察器是无效的，回调方法只会执行一次。
// 如果指定不同的 options对象，则会被当作两个不同的观察器
observer.observe(observerDom, observeOptions);

disconnect()：停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。
takeRecords()：清除变动记录，即不再处理未处理的变动。该方法返回变动记录的数组。

MutationRecord 对象

DOM 每次发生变化，就会生成一条变动记录（MutationRecord 实例）。该实例包含了与变动相关的所有信息。MutationObserver 处理的就是一个个 MutationRecord 实例所组成的数组。

MutationRecord 对象包含了 DOM 的相关信息，有如下属性：

type：观察的变动类型（attribute、characterData或者childList）。
target：发生变动的DOM节点。
addedNodes：新增的DOM节点。
removedNodes：删除的DOM节点。
previousSibling：前一个同级节点，如果没有则返回null。
nextSibling：下一个同级节点，如果没有则返回null。
attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
oldValue：变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。

参考

JavaScript标准参考教程（alpha）- Mutation Observer APIopen in new window

页面等比缩放

# 页面等比缩放

# vueAutoResizeContainer 组件

# 相关知识点

# MutationObserver：监听DOM变动

# MutationObserver 概述

# MutationObserver 构造函数

# MutationObserver 实例方法

# MutationRecord 对象

# 参考

页面等比缩放

vueAutoResizeContainer 组件

相关知识点

MutationObserver：监听DOM变动

MutationObserver 概述

MutationObserver 构造函数

MutationObserver 实例方法

MutationRecord 对象

参考