Vue大屏自适应--响应式盒子

Vue大屏项目自适应--响应式盒子

一、获取当前浏览器可视窗口宽高

1、在Vue项目 src文件夹内新建 utils文件夹=>index.js。


utils

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


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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342