文字内容适配

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

posted @   干饭吧  阅读(27)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示