VScaleScreen大屏自适应组件(适用于vue)

2024-05-19  本文已影响0人  Limolovely

1、安装

npm install v-scale-screen

2、在main.js引入

import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)

3、使用

<template>
  <v-scale-screen :width="clientWidth" :height="clientHeight" :fullScreen="true">
    <div id="app">
      <router-view></router-view>
    </div>
  </v-scale-screen>
</template>

<script>
import VScaleScreen from 'v-scale-screen'
export default {
  name: 'App',
  components: {
    VScaleScreen
  },
  data() {
    return {
      clientWidth: 1920,
      clientHeight: 1080,
    };
  },
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读