vue3-screen-scale

用作屏幕缩放适配，尤其适用于大屏。

安装

第一步：npm install vue3-screen-scale --save
第二步：在main.js文件中引入指令文件
import { scale } from 'vue3-screen-scale';
第三步：在main.js中注册指令
app.directive('scale',scale);

用法

在项目的某个dom元素上使用指令，通常为根级元素

<div class="base-page" v-scale="{width:1920,height:1080}"></div>
width，height代表页面的原始尺寸，缩放均是根据它进行放缩，如果指令v-scale未添加额外参数，则需要在页面地址上添加参数scale,例如：www.xxx.com/#/?scale=0,参数值为0，表示同时会以当前屏幕宽和高进行缩放，页面通常会变形（除非屏幕宽高比刚好等于原始尺寸的宽高比），值为1代表以宽度进行同比例缩放，值为2代表以高度进行同比例缩放。

<div class="base-page" v-scale:1="{width:1920,height:1080}"></div>
如果指令带参数，则页面地址无需添加scale参数，指令参数值就代表缩放类型，本例就代表根据宽度进行同比缩放