// 缩放指令
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;
标签:文字,el,const,callback,适配,height,width,内容,options From: https://www.cnblogs.com/czb1218/p/16740395.html