vue3 可视化大屏自适应屏幕组件

首先定义了一个名叫ScreenContainerOptions的组件,需要传的参数如下

TypeScript 复制代码
export type ScreenContainerOptions = {
  width?: string | number
  height?: string | number
  screenFit?: boolean // 是否开启屏幕自适应,不然会按比例显示
}

组件的主要代码如下

TypeScript 复制代码
onMounted(async () => {
  await initSize()
  updateSize()
  updateScale()
  window.addEventListener('resize', onResize)
  isReady.value = true // 执行完上面的方法后再渲染slot插槽
})

// 初始化宽高
const initSize = () => {
  return new Promise((resolve) => {
    nextTick(() => {
      dom = refName.value
      parentDom = refNameParent.value

      // 获取大屏的真实尺寸(不传值就是dom元素的宽高)
      widthRef.value = props.options?.width || dom.clientWidth
      heightRef.value = props.options?.height || dom.clientHeight

      // 获取屏幕尺寸,避免重复计算
      if (!screenWidthRef.value || !screenHeightRef.value) {
        screenWidthRef.value = window.screen.width
        screenHeightRef.value = window.screen.height
      }

      resolve(true)
    })
  })
}
// 更新宽高
const updateSize = () => {
  dom.style.width = `${widthRef.value || screenWidthRef.value}px`
  dom.style.height = `${heightRef.value || screenHeightRef.value}px`
}
// 更新缩放比例
const updateScale = () => {
  // window.innerWidth 获取当前展示区域的宽度
  const currentWidth = window.innerWidth

  // 获取大屏最终真实的宽度
  const realWidth = widthRef.value || screenWidthRef.value

  // 是否开启屏幕适配,不会按照比例
  const { screenFit } = props.options
  // 如果不想屏幕留白,而是自适应宽高的话
  let heightScale = 1
  // window.innerWidth 获取当前展示区域的宽度
  const currentHeight = window.innerHeight
  // 获取大屏最终真实的宽度
  const realHeight = heightRef.value || heightRef.value
  if (screenFit) {
    heightScale = currentHeight / realHeight
    // if (parentDom) {
    //   parentDom.style.height = dom.style.height = `${window.innerHeight}px` // 父容器宽度设置为原屏幕的宽度
    // }
  }

  // 算出缩放比例并赋值
  // 只需要根据宽度计算即可
  const scale = currentWidth / realWidth
  dom && (dom.style.transform = `scale(${scale}, ${screenFit ? heightScale : 1})`) // 不开启screenFit的话高度不需要缩放
  if (parentDom) {
    parentDom.style.width = `${window.innerWidth}px` // 父容器宽度设置为原屏幕的宽度
    screenFit && (parentDom.style.height = `${window.innerHeight}px`) // 父容器宽度设置为原屏幕的宽度
  }
}

// 浏览器resize事件触发回调
const onResize = async () => {
  await initSize()
  await nextTick()
  updateScale()
}

组件完整代码地址

https://github.com/jimchou-h/vue-study/blob/dev/src/components/ScreenContainer.vue

相关推荐
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
JosieBook2 天前
【前端】Vue3 前端项目实现动态显示当前系统时间
前端·vue3·系统时间
摆烂式编程2 天前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
一只小阿乐3 天前
前端vue3 H5实现 静态页面使用本地json 并且需要上下滑动 可以切换tabs 栏
前端·json·vue3·h5开发
知识分享小能手3 天前
Vue3 学习教程,从入门到精通,Vue 3 表单控件绑定详解与案例(7)
前端·javascript·vue.js·学习·前端框架·vue3·anti-design-vue
梁辰兴4 天前
企业培训笔记:宠物信息管理--实现宠物信息分页查询
笔记·elementui·mybatis·vue3·springboot·宠物
爱看书的小沐6 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
梁辰兴7 天前
企业培训笔记:Vue3前端框架配置
笔记·前端框架·npm·vue·vue3·node
知识分享小能手9 天前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3