這篇文章為大家帶來了關於vue的相關知識，主要介紹了Vue指令實現大屏幕元素分辨率適配詳解，包括了常見的適配方案以及css縮放方案等等，下面一起來看一下，希望對大家有幫助。
【相關推薦：javascript影片教學、vue.js教學】
隨著前端技術的不斷發展、數據中心（中台）之類的概念的不斷升級、物聯網設備的更新和普及，越來越多的業主（項目）喜歡在系統中添加一個或多個可視化大屏，用來集中的展現數據變化、位置變化等等，老闆們也更喜歡稱之為「態勢」。
當然，身為程式設計師一般都不關心「老闆們」的想法，只要完成專案即可。但常常會有這樣的問題：我有一個大屏的模板，但是用戶的瀏覽器分辨率不夠，或者有的有書籤欄有的沒有書籤欄，更或者是有的全屏了有的只是小窗口，這樣就有了程式碼對不同解析度場景下的適配需求了。
平時我們使用的web 端的適配方案，主要有以下幾種：
目前大多數螢幕適應方案的原理都是採用的以上的幾種方式，但是這幾種方式也有很大的弊端：瀏覽器文字有最小尺寸！
在一般的 1080p 及以上的解析度的螢幕中，大多數設計圖的比例和顯示效果都能完美還原。但如果某個系統的頁面內容太多，或是瀏覽器部分所使用的解析度（不是實體解析度）無法達到完整顯示的要求，則採用上面的幾種方式就有可能造成文字的運算大小小於瀏覽器的最小字體大小，此時就有可能因為文字寬度超出元素而導致頁面樣式崩潰。
版心佈局配合最小寬度可以保證顯示效果，但不適合大螢幕專案。
在上面的幾種方案都不滿足時，大家一般就會採用另一個方案：CSS3 scale 縮放。
透過計算設計圖尺寸比例與實際的頁面顯示區域大小，來動態調整元素的縮放比例。
個人認為這是針對小解析度情況下保留顯示內容及樣式最好的一種處理方式。
當然，這種方式仍然有一些弊端：
這裡簡單回顧一下Vue 的自訂指令：透過設定自訂指令和綁定參數，在元件/元素載入、更新、銷毀等不同時期執行對應的處理邏輯。
Vue 的自訂指令包含幾個鉤子函數：
這裡因為我們只需要在初始化時綁定瀏覽器的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;說明：
整個程式碼其實很簡單，就是透過監聽resize 事件去調整元素的縮放比例。
但這裡我也做了一點小的配置，用來適應更多的情況：
當然，這個指令不能說有多完美，還是有很多有漏洞的地方，比如沒有防抖、縮放不會改變css指定的尺寸，容易出現滾動條等；
並且因為之前的專案中也涉及到很多圖表、地圖，也常常導致一些顯示問題，所以後面有增加了一些新的指令，但是解析度適配這個問題還是要根據實際情況來確定具體的方案。
【相關推薦：javascript影片教學、vue.js教學】
以上是Vue指令實現大螢幕元素解析度適配詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
