Vue大屏項(xiàng)目自適應(yīng)--響應(yīng)式盒子
一、獲取當(dāng)前瀏覽器可視窗口寬高
1蒋譬、在Vue項(xiàng)目 src文件夾內(nèi)新建 utils文件夾=>index.js。
utils
2、在utils文件夾內(nèi)的index.js內(nèi)獲取可視窗口寬高
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;
};
二街立、將當(dāng)前瀏覽器可視窗口寬高存儲(chǔ)到Vuex倉(cāng)庫(kù)中
store倉(cāng)庫(kù)設(shè)置
1、在store倉(cāng)庫(kù)中創(chuàng)建自定義模塊 modules
store modules
2埠通、配置倉(cāng)庫(kù)
在modules文件夾內(nèi)的model.js文件內(nèi)引入U(xiǎn)til文件
存儲(chǔ)頁面寬高及配置修改頁面寬高函數(shù)
import Util from "@/utils";
const customModule = {
state: {
// 當(dāng)前頁面寬度
pageWidth: Util.getPageWidth(),
// 當(dāng)前頁面高度
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文件內(nèi)引入自定義模塊
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文件內(nèi)監(jiān)聽
main.js 配置 window.onresize 修改頁面寬高
window.onresize = () => {
store.dispatch("changePageWidth");
store.dispatch("changePageHegiht");
};
四端辱、創(chuàng)建響應(yīng)式盒子組件
<template>
<div :style="boxStyle" @click="clickFunction">
<slot></slot>
</div>
</template>
<script>
/**
@description 響應(yīng)式盒子
@augments wh: 盒子寬高(auto：100%,"height:'width'":強(qiáng)制寬高一致)
@augments mg: 盒子外邊距
@augments pd: 盒子內(nèi)邊距
@augments psn: 定位
@augments ps: 定位邊距
@augments ratio: 等比例（根據(jù)寬計(jì)算高）
@demo <auto-view :wh=[150,50] :psn="absolute" :ps="[50,0,0,0]"></auto-view>
*/
export default {
name: "viewAuto",
props: {
// 寬高
wh: {
type: Array,
default: () => [],
},
// 內(nèi)邊距
pd: {
type: Array,
default: () => [],
},
// 外邊距
mg: {
type: Array,
default: () => [],
},
// 定位模式
psn: {
type: String,
default: "static",
},
// 定位距離
ps: {
type: Array,
default: () => [],
},
// 等比例（根據(jù)寬計(jì)算高）
ratio: {
type: Number,
default: 0,
},
},
computed: {
/**
* @description: 響應(yīng)盒子樣式 計(jì)算屬性
* @param {type}
* @return {string}響應(yīng)盒子樣式
*/
boxStyle() {
let pageWidth = this.$store.state.customModule.pageWidth; // 當(dāng)前屏幕寬度
let pageHeight = this.$store.state.customModule.pageHeight; // 當(dāng)前屏幕高度
let ratio_w = pageWidth / 1920; // 寬度縮放比
let ratio_h = pageHeight / 1080; //高度縮放比
let style = {};
// 根據(jù)比例設(shè)置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";
}
}
}
// 根據(jù)比例設(shè)置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";
}
// 根據(jù)比例設(shè)置box內(nèi)邊距
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";
}
// 根據(jù)比例設(shè)置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: 響應(yīng)式盒子點(diǎn)擊事件
* @param {type}
* @return {type}
*/
clickFunction() {
this.$emit("click");
},
},
};
</script>
