vue大屏适配通用容器方案

scaleBox.vue源码

<template>
  <div id="screen"
       :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`
    }">
    <slot />
  </div>
</template>
 
<script>
export default {
  props: {},
  data() {
    return {
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
      },
    }
  },
  methods: {
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform =
        'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
  },
  mounted() {
    const that = this
    that.setScale()
    /* 窗口改变事件 */
    window.addEventListener('resize', function () {
      that.setScale()
    })
  },
}
</script>
 
<style lang="scss">
#screen {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>

基本实现布局效果 会根据视窗的变化调整大屏比例，容器内部编写直接按照宽1920px,高1080px单位为px的排版布局编写即可，其他的就交给上述代码即可，示例：

<template>
  <scale-box>
    <div class="main-wrapper">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </scale-box>
</template>

<script>
import scaleBox from './scaleBox.vue'
export default {
  components: {
    scaleBox,
  },
}
</script>

<style lang="scss" scoped>
.box1 {
  width: 1000px;
  height: 200px;
  background-color: orange;
}
.box2 {
  width: 920px;
  height: 200px;
  background-color: green;
}
.main-wrapper {
  height: 100%;
  display: flex;
}
</style>

效果图：

缩放后效果：

无论页面如何缩放，都会因为css3的transform属性实现等比例缩放

vue3写法：

<template>
  <div id="screen"
       :style="{
      width: `${style.width}px`,
      height: `${style.height}px`,
      transform: `${style.transform}`
    }">
    <slot />
  </div>
</template>

<script setup>
const style = ref({
  width: '1920',
  height: '1080',
  transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
})

function getScale() {
  const w = window.innerWidth / style.value.width
  const h = window.innerHeight / style.value.height
  return { x: w, y: h }
}
function setScale() {
  const scale = getScale()
  style.value.transform =
    'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
}
setScale()
/* 窗口改变事件 */
window.addEventListener('resize', function () {
  setScale()
})
</script>

<style lang="scss" scoped>
#screen {
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>

常用的大屏插件

1.翻牌器（数字滚动插件）

插件地址：vue-countTo
使用教程：vue-count-to–数字滚动插件

"vue-count-to": "^1.0.13",

vue2示例：

 <countTo :style="'color:'+color" 
 	:startVal='0'
  	:endVal='value' 
  	:duration='1000'>
  </countTo>

js

    import countTo from 'vue-count-to';
    export default {
        components: { countTo },
        data(){
        	return {
				value:100
			}
        }
     }

vue3示例：

<template>
  <count-to
     :start-val="startPercent"
     :end-val="growthLastDay"
     :duration="1000"
     :decimals="2"
     suffix="%"
  />
  </span>
</template>
<script>
import countTo from 'vue-count-to';
export default {
    components: { countTo },
    props: {
      todayUser: Number,
      growthLastDay: {
        type: Number,
        default: 0
      }
    },
    setup(props) {
      const startVal = ref(0)
      const startPercent = ref(0)
      const updateStartVal = () => {
        startVal.value = props.todayUser
        startPercent.value = props.growthLastDay
      }
      return {
        startVal,
        startPercent
      }
    }
  }
</script>

2.无缝滚动

插件地址：vue-seamless-scroll

vue3插件使用：

"vue3-seamless-scroll": "^2.0.1"

使用示例：
html

          <vue3-seamless-scroll class="table-tbody"
                                :hover="true"
                                :limitScrollNum="3"
                                :step=" 0.4"
                                :list="tableData">
            <!-- 排 -->
            <div class="table-row"
                 :class="{'table-row2': index%2==0}"
                 v-for="(row,index) in tableData"
                 :key="index+'table'">
              <!-- 列 -->
              <p class="table-col table-col1 ">{{ row.name }}</p>
              <p class="table-col">{{ row.mv }}</p>
              <p class="table-col">{{ row.temp }}</p>
            </div>
          </vue3-seamless-scroll>

js

// 引入无缝滚动组件
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
export default {
  components: {
    Vue3SeamlessScroll,
  },
    data() {
    return {
      tableData: [
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
        {
          name: '1号柜子',
          mv: '23.1',
          temp: '2.1',
        },
      ],
    }
  },

css

    .table-tbody {
          width: 100%;
          height: 250px;
          overflow: hidden;

          .table-row {
            width: 100%;
            padding: 0 10px;
            height: 60px;
            display: flex;
            align-items: center;

            .table-col {
              flex: 1;
              text-align: center;
              font-size: 12px;
            }

            .table-col1 {
              text-align: left;
              padding-left: 20px;
              width: 150px;
              word-wrap: break-word;
            }
          }

          .table-row2 {
            height: 40px;
          }
        }

vue2插件：

 "vue-seamless-scroll": "^1.1.23",

使用方法与上述vue3基本一致