在vue
中,v-scale-screen
可用于大屏项目开发,实现屏幕自适应,可根据宽度自适应,高度自适应,和宽高等比例自适应,全屏自适应。
- 仓库地址:github
- 国内地址:gitee
一、安装
npm install v-scale-screen@1.0.0
注意:
vue2使用1.0.0
版本,vue3使用2.0.0
以上版本
二、使用
(1)在vue2中使用插件方式导出,用Vue.use()
进行注册
main.js中:
import Vue from "vue";
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
vue页面中:
<template><v-scale-screen width="1920" height="1080"><div><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart></div></v-scale-screen>
</template>
使用时将 body
样式设置为overflow: hidden
例如:在home.vue中:
<template><v-scale-screen width="1920" height="1080" class="scale-wrap"><div class="bg"><div class="host-body"><!-- 头部 e--><!-- 内容 s--><router-view></router-view></div></div></v-scale-screen>
</template>
(2)在vue3中以组件方式导出
<template><v-scale-screen width="1920" height="1080"><div><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart><v-chart>....</v-chart></div></v-scale-screen>
</template><script>
import { defineComponent } from "vue"
import VScaleScreen from 'v-scale-screen'export default defineComponent({name:'Demo',components:{VScaleScreen}
})
</script>
三、API
v-scale-screen
默认等比例屏幕缩放,当视图不满足比例,上下或左右会有留白(黑框)。如果想要铺满全屏,可以配置autoScale
或将fullScreen
设置为true
。其原理是用到了css的transform
属性实现缩放效果,进行等比例计算,达到等比例缩放的效果。
好的案例可参考:
https://gitee.com/kala0105/IofTV-Screen
https://gitee.com/MTrun/big-screen-vue-datav