怎么用Vue指令实现大屏元素分辨率适配

蜗牛互联网技术资讯 2022-10-10 114 0

今天小编给大家分享一下怎么用Vue指令实现大屏元素分辨率适配的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1. 常见的适配方案

平时我们使用的 web 端的适配方案，主要有以下几种：

vw/vh 配合百分比实现，让元素根据窗口大小进行自动调整
fontSize 配合 rem 实现“单位宽度”的统一
根据不同的分辨率范围调整页面布局
版心布局，配合最小宽度

目前大多数屏幕适配方案的原理都是采用的以上的几种方式，但是这几种方式也有很大的弊端：浏览器文字有最小尺寸！

在一般的 1080p 及以上的分辨率的屏幕中，大多数设计图的比例和显示效果都能完美还原。但如果某个系统的页面内容太多，或者浏览器部分使用的分辨率（不是物理分辨率）达不到完整显示的要求，采用上面的几种方式就有可能造成 文字的计算大小小于浏览器的最小字体大小，此时就有可能因为文字宽度超出元素而导致页面样式崩溃。

版心布局配合最小宽度可以保证显示效果，但是不适合大屏项目。

2. CSS3 缩放方案

在上面的几种方案都不满足时，大家一般就会采用另外一种方案：CSS3 scale 缩放。

通过计算设计图尺寸比例与实际的页面显示区域大小，来动态调整元素的缩放比例。

个人认为这是针对小分辨率情况下保留显示内容及样式最好的一种处理方式。

当然，这种方式依然有一些弊端：

缩放后可能会造成边缘显示模糊
如果内部存在 canvas 元素，可能导致 canvas 内部的内容渲染失真
高德地图 1.x 会导致事件坐标偏移 (2.0 已经修复)
...

3. 封装一个缩放指令

这里简单回顾一下 Vue 的自定义指令：通过配置自定义指令和绑定参数，在组件/元素加载、更新、销毁等不同时期执行对应的处理逻辑。

Vue 的自定义指令包含一下几个钩子函数：

bind: 解析到指令绑定时执行，仅执行一次
inserted: 插入父节点时执行
update：组件触发更新时执行
componentUpdated：所有组件更新结束之后执行
unbind：元素解绑（销毁）时执行，也只执行一次

这里因为我们只需要在初始化时绑定浏览器的 resize 事件来调整元素缩放，所以只需要配置 inserted 即可；当然，为了优化代码逻辑，减少资源消耗等情况，也需要在 unbind 阶段去取消 resize 事件的一个回调函数。

代码如下：

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

说明：