gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:261回复:0

vue使页面可以自由拉伸屏幕大小,拉伸页面大小

楼主#
更多 发布于:2024-03-06 10:25
引入screenSizeJS(js一般放在assets/js下)

// 屏幕缩放
export function screenSize(editorDom) {
  let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
  let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
  let defWidth = 1920;
  let defHeight = 1080;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';

  $(window).resize(() => {
    let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
    let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';
  })
}




页面上引入:

<div class="wrap" ref="editor">neirong</div>

import { screenSize } from '@/assets/js/utils'

mounted() {
    screenSize(this.$refs.editor);
},
游客


返回顶部