v-scale-screen超级好用的大屏自适应组件
1、安装依赖2、vue 引入vue2中使用插件导入,vue3以组件导入v-scale-screen 默认等比例屏幕缩放,当试图不满足比例,上下或左右会有留白(黑框)。如果想要铺满全屏,且对视图拉伸无感,可以配置autoScale,或者将fullScreen设置为true也可以自定义留白颜色。
·
1、安装依赖
npm install v-scale-screen 或 yarn add v-scale-screen
2、vue 引入 vue2中使用插件导入,vue3以组件导入
- vue2 中引入
// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
<template>
<v-scale-screen width="1920" height="1080">
<div></div>
</v-scale-screen>
</template>
- vue3 中引入
<template>
<v-scale-screen width="1920" height="1080">
<div></div>
</v-scale-screen>
</template>
<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'
export default defineComponent({
name: 'Demo',
components: {
VScaleScreen
}
})
</script>
v-scale-screen 默认等比例屏幕缩放,当视图不满足比例,上下或左右会有留白(黑框)。如果想要铺满全屏,且对视图拉伸无感,可以配置autoScale,或者将fullScreen设置为true
<!-- 铺满全屏 -->
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true">
<div></div>
</v-scale-screen>
也可以自定义留白颜色
<template>
<div>
<v-scale-screen ref="scale-screen" width="1920" height="1080" :boxStyle="boxStyle">
<div></div>
</v-scale-screen>
</div>
</template>
<script>
export default {
name: 'App',
components: {
VScaleScreen,
},
data() {
return {
boxStyle: {
background: 'linear-gradient(to top ,#00257d, #042f55)'
},
}
},
问题:对element ui 等插件的一下弹出框会有比例失调的问题
v-scale-screen其原理是使用css属性transform实现缩放效果,进行等比例计算,达到等比例缩放的效果。
而我们也可以获取当前的缩放比例,进而对 elementui 组件的样式修改
//获取大屏缩放比例
const val = this.$refs['scale-screen'].$el.children[0].style.transform
this.scale = val
<el-dialog :visible.sync="true" style="{'transform':scale}">
</el-dialog>
更多推荐
已为社区贡献1条内容
所有评论(0)