首页 > 其他分享 >文字内容适配

文字内容适配

时间:2022-09-29 09:57:32浏览次数:47  
标签:文字 el const callback 适配 height width 内容 options

// 缩放指令
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

相关文章