技术笔记

介绍

解决思路 利用css 缩放 来处理大屏适配的问题，

封装组件

<template>
  <div :style="styleObject" class="scale-box">
    <slot>

    
    </slot>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted ,
computed,
watch,
onUnmounted
} from 'vue';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/


const prop =   defineProps({
     width:  {
      type: Number,
       default: 1920,
    },
     height:  {
      type: Number,
        default: 1080,
    },
    module:{
      type: String,
      default: 'scrollY',//FIT 按照比例渲染  scrollY  上下滚动 scrollX 左右滚动 
    }
})


 let  getScale = ()=> {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      return document.documentElement.clientWidth / prop.width
    }
     let  setScale = ()=> {
        // 获取到缩放比，设置它
      let scale = getScale()
      state.scale = scale
    }
 
const styleObject = computed(() => {
   let obj = {
       
      
      }
      if(prop.module === 'fit'){
        return {
          transform: `scale(${state.scale})`,
        WebkitTransform: `scale(${state.scale})`,
            width: prop.width + "px",
        height: prop.height + "px",
         overflow: 'hidden'
        }
      }else if(prop.module === 'scrollY'){
        return {
                   transform: `scale(${state.scale})`,
            width: prop.width + "px",
        }
      }
       
})

    const state:any = reactive({
     scale: getScale(),
 })
onMounted(() => {
     getScale()
    window.addEventListener("resize", setScale)
})
   onUnmounted(() => {
     window.addEventListener("resize", setScale)
    })
</script>
<style  >

</style>
<style  scoped lang="scss" >

.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left:0;
  top: 0;
  transition: 0.3s;
}


</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

使用示例

 <Scalebox :width="1920" :height="1080">
    <!-- 大屏内容区域 --> 
 </Scalebox>

 <style lang="scss" >
  ::-webkit-scrollbar {
  width: 0 !important;
}
</style>
1
2
3
4
5
6
7
8
9

属性

属性名数据类型说明
widthNumber大屏设计图宽度
heightNumber大屏设计图高度