Vue大屏项目自适应--响应式盒子
一、获取当前浏览器可视窗口宽高
1、在Vue项目 src文件夹内新建 utils文件夹=>index.js。
2、在utils文件夹内的index.js内获取可视窗口宽高
let Util = {};
export default Util;
/**
* @description: 获取页面宽度
* @param {type}
* @return {Number} 页面可视窗口宽度
*/
Util.getPageWidth = () => {
// 页面可视窗口宽度
let pageWidth = document.documentElement.clientWidth;
// 页面可视窗口最小宽度
pageWidth = pageWidth < 1280 ? 1280 : pageWidth;
return pageWidth;
};
/**
* @description: 获取页面高度
* @param {type}
* @return {Number} 页面可视窗口高度
*/
Util.getPageHeight = () => {
// 页面可视窗口高度
let pageHeight = document.documentElement.clientHeight;
// 页面可视窗口最小高度
pageHeight = pageHeight < 720 ? 720 : pageHeight;
return pageHeight;
};
二、将当前浏览器可视窗口宽高存储到Vuex仓库中
store仓库设置
1、在store仓库中创建自定义模块 modules
2、配置仓库
在modules文件夹内的model.js文件内引入Util文件
存储页面宽高及配置修改页面宽高函数
import Util from "@/utils";
const customModule = {
state: {
// 当前页面宽度
pageWidth: Util.getPageWidth(),
// 当前页面高度
pageHeight: Util.getPageHeight(),
},
mutations: {
// 更改页面宽度
setPageWidth: (state) => {
state.pageWidth = Util.getPageWidth();
},
// 更改页面高度
setPageHeight: (state) => {
state.pageHeight = Util.getPageHeight();
},
},
actions: {
// 修改页面宽度
changePageWidth({ commit }) {
commit("setPageWidth");
},
// 修改页面高度
changePageHegiht({ commit }) {
commit("setPageHeight");
},
},
};
export default customModule;
3、在index.js文件内引入自定义模块
import Vue from "vue";
import Vuex from "vuex";
// 自定义模块
import customModule from "./modules/model";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
customModule,
},
});
export default store;
三、在main.js文件内监听
main.js 配置 window.onresize 修改页面宽高
window.onresize = () => {
store.dispatch("changePageWidth");
store.dispatch("changePageHegiht");
};
四、创建响应式盒子组件
<template>
<div :style="boxStyle" @click="clickFunction">
<slot></slot>
</div>
</template>
<script>
/**
@description 响应式盒子
@augments wh: 盒子宽高(auto:100%,"height:'width'":强制宽高一致)
@augments mg: 盒子外边距
@augments pd: 盒子内边距
@augments psn: 定位
@augments ps: 定位边距
@augments ratio: 等比例(根据宽计算高)
@demo <auto-view :wh=[150,50] :psn="absolute" :ps="[50,0,0,0]"></auto-view>
*/
export default {
name: "viewAuto",
props: {
// 宽高
wh: {
type: Array,
default: () => [],
},
// 内边距
pd: {
type: Array,
default: () => [],
},
// 外边距
mg: {
type: Array,
default: () => [],
},
// 定位模式
psn: {
type: String,
default: "static",
},
// 定位距离
ps: {
type: Array,
default: () => [],
},
// 等比例(根据宽计算高)
ratio: {
type: Number,
default: 0,
},
},
computed: {
/**
* @description: 响应盒子样式 计算属性
* @param {type}
* @return {string}响应盒子样式
*/
boxStyle() {
let pageWidth = this.$store.state.customModule.pageWidth; // 当前屏幕宽度
let pageHeight = this.$store.state.customModule.pageHeight; // 当前屏幕高度
let ratio_w = pageWidth / 1920; // 宽度缩放比
let ratio_h = pageHeight / 1080; //高度缩放比
let style = {};
// 根据比例设置box宽高
if (this.wh[0]) {
if (this.wh[0] == "auto") {
style.width = "100%";
} else {
style.width = ratio_w * this.wh[0] + "px";
}
}
if (this.ratio !== 0) {
style.height = this.ratio * ratio_w * this.wh[0] + "px";
} else {
if (this.wh[1]) {
if (this.wh[1] == "auto") {
style.height = "100%";
} else if (this.wh[1] == "width") {
style.height = ratio_w * this.wh[0] + "px";
} else {
style.height = ratio_h * this.wh[1] + "px";
}
}
}
// 根据比例设置box外边距
if (this.mg.length > 0) {
style["margin-top"] = ratio_h * this.mg[0] + "px";
style["margin-right"] = ratio_w * this.mg[1] + "px";
style["margin-bottom"] = ratio_h * this.mg[2] + "px";
style["margin-left"] = ratio_w * this.mg[3] + "px";
}
// 根据比例设置box内边距
if (this.pd.length > 0) {
style["padding-top"] = ratio_h * this.pd[0] + "px";
style["padding-right"] = ratio_w * this.pd[1] + "px";
style["padding-bottom"] = ratio_h * this.pd[2] + "px";
style["padding-left"] = ratio_w * this.pd[3] + "px";
}
// 根据比例设置box定位
if (this.psn != "static") {
style["position"] = this.psn;
if (this.ps[0] != 0) {
style["top"] = ratio_h * this.ps[0] + "px";
}
if (this.ps[1] != 0) {
style["right"] = ratio_w * this.ps[1] + "px";
}
if (this.ps[2] != 0) {
style["bottom"] = ratio_h * this.ps[2] + "px";
}
if (this.ps[3] != 0) {
style["left"] = ratio_w * this.ps[3] + "px";
}
}
return style;
},
},
methods: {
/**
* @description: 响应式盒子点击事件
* @param {type}
* @return {type}
*/
clickFunction() {
this.$emit("click");
},
},
};
</script>