快捷導(dǎo)航

Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解

更新時(shí)間：2022年09月29日 08:58:42 作者：MiyueFE

這篇文章主要為大家介紹了Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

隨著前端技術(shù)的不斷發(fā)展、數(shù)據(jù)中心（中臺(tái)）之類的概念的不斷升級(jí)、物聯(lián)網(wǎng)設(shè)備的更新和普及，越來(lái)越多的業(yè)主（項(xiàng)目）喜歡在系統(tǒng)中添加一個(gè)或者多個(gè)可視化大屏，用來(lái)集中的展現(xiàn)數(shù)據(jù)變化、位置變化等等，老板們也更喜歡稱之為“態(tài)勢(shì)”。

當(dāng)然，作為程序員一般都不關(guān)心“老板們”的想法，只要完成項(xiàng)目即可。但是經(jīng)常會(huì)有這樣的問(wèn)題：我有一個(gè)大屏的模板，但是用戶的瀏覽器分辨率不夠，或者有的有書簽欄有的沒(méi)有書簽欄，更或者是有的全屏了有的只是小窗口，這樣就有了代碼對(duì)不同分辨率場(chǎng)景下的適配需求了。

1. 常見(jiàn)的適配方案

平時(shí)我們使用的 web 端的適配方案，主要有以下幾種：

vw/vh 配合百分比實(shí)現(xiàn)，讓元素根據(jù)窗口大小進(jìn)行自動(dòng)調(diào)整
fontSize 配合 rem 實(shí)現(xiàn)“單位寬度”的統(tǒng)一
根據(jù)不同的分辨率范圍調(diào)整頁(yè)面布局
版心布局，配合最小寬度

目前大多數(shù)屏幕適配方案的原理都是采用的以上的幾種方式，但是這幾種方式也有很大的弊端：瀏覽器文字有最小尺寸！

在一般的 1080p 及以上的分辨率的屏幕中，大多數(shù)設(shè)計(jì)圖的比例和顯示效果都能完美還原。但如果某個(gè)系統(tǒng)的頁(yè)面內(nèi)容太多，或者瀏覽器部分使用的分辨率（不是物理分辨率）達(dá)不到完整顯示的要求，采用上面的幾種方式就有可能造成 文字的計(jì)算大小小于瀏覽器的最小字體大小，此時(shí)就有可能因?yàn)槲淖謱挾瘸鲈囟鴮?dǎo)致頁(yè)面樣式崩潰。

版心布局配合最小寬度可以保證顯示效果，但是不適合大屏項(xiàng)目。

2. CSS3 縮放方案

在上面的幾種方案都不滿足時(shí)，大家一般就會(huì)采用另外一種方案：CSS3 scale 縮放。

通過(guò)計(jì)算設(shè)計(jì)圖尺寸比例與實(shí)際的頁(yè)面顯示區(qū)域大小，來(lái)動(dòng)態(tài)調(diào)整元素的縮放比例。

個(gè)人認(rèn)為這是針對(duì)小分辨率情況下保留顯示內(nèi)容及樣式最好的一種處理方式。

當(dāng)然，這種方式依然有一些弊端：

縮放后可能會(huì)造成邊緣顯示模糊
如果內(nèi)部存在 canvas 元素，可能導(dǎo)致 canvas 內(nèi)部的內(nèi)容渲染失真
高德地圖 1.x 會(huì)導(dǎo)致事件坐標(biāo)偏移 (2.0 已經(jīng)修復(fù))
...

3. 封裝一個(gè)縮放指令

這里簡(jiǎn)單回顧一下 Vue 的自定義指令：通過(guò)配置自定義指令和綁定參數(shù)，在組件/元素加載、更新、銷毀等不同時(shí)期執(zhí)行對(duì)應(yīng)的處理邏輯。

Vue 的自定義指令包含一下幾個(gè)鉤子函數(shù)：

bind: 解析到指令綁定時(shí)執(zhí)行，僅執(zhí)行一次
inserted: 插入父節(jié)點(diǎn)時(shí)執(zhí)行
update：組件觸發(fā)更新時(shí)執(zhí)行
componentUpdated：所有組件更新結(jié)束之后執(zhí)行
unbind：元素解綁（銷毀）時(shí)執(zhí)行，也只執(zhí)行一次

這里因?yàn)槲覀冎恍枰诔跏蓟瘯r(shí)綁定瀏覽器的 resize 事件來(lái)調(diào)整元素縮放，所以只需要配置 inserted 即可；當(dāng)然，為了優(yōu)化代碼邏輯，減少資源消耗等情況，也需要在 unbind 階段去取消 resize 事件的一個(gè)回調(diào)函數(shù)。

代碼如下：

// 縮放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 獲取顯示區(qū)域高寬
    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;

說(shuō)明：

指令接收一個(gè)對(duì)象參數(shù)，用來(lái)指定比例計(jì)算方式和縮放定位
需要一個(gè)全局配置 CONF 對(duì)象，用來(lái)指定默認(rèn)的頁(yè)面尺寸
為了保證頁(yè)面已經(jīng)加載完，能獲取到 dom 元素，需要調(diào)用 Vue.nextTick
需要銷毀監(jiān)聽(tīng)事件

整個(gè)代碼其實(shí)很簡(jiǎn)單，就是通過(guò)監(jiān)聽(tīng) resize 事件去調(diào)整元素的縮放比例。

但是這里我也做了一點(diǎn)小的配置，用來(lái)適應(yīng)更多的情況：

接收一個(gè) target 配置，用來(lái)確認(rèn)比例計(jì)算方式；可以以寬度或者高度作為統(tǒng)一的縮放標(biāo)準(zhǔn)，也可以分別計(jì)算
接收 transform 的 origin 配置，保證不同位置的元素可以縮放到不同的位置，避免縮放偏移
不涉及綁定元素的尺寸，只需要默認(rèn)尺寸即可；寫代碼時(shí)可以直接根據(jù)設(shè)計(jì)圖配置元素尺寸