【Vue3】Vue3实用的小东西 |动态检测屏幕尺寸

视觉CG

已于 2023-04-28 12:35:16 修改

阅读量3.1k

点赞数 4

分类专栏： web日常小问题 Vue3 文章标签： vue.js 前端 javascript

于 2023-01-07 03:00:10 首次发布

本文链接：https://blog.csdn.net/qq_43614372/article/details/128587220

版权

Vue3 同时被 2 个专栏收录

24 篇文章 3 订阅

订阅专栏

web日常小问题

6 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue3项目中使用@vueuse/core的useBreakpoints功能来动态检测屏幕尺寸，从而实现抽屉组件在大屏和小屏设备上的不同宽度。通过定义不同屏幕尺寸的断点，并结合vue的reactive和watch，实现实时更新抽屉宽度，达到响应式布局的效果。

摘要由CSDN通过智能技术生成

下载@vueuse/core

npm i @vueuse/core

useBreakpoints | 响应式

useBreakpoints
- 作用：动态检测屏幕尺寸，可以用来做一些响应式操作

参考链接

Vue3-useBreakpoints
备用地址 https://vueuse.org/core/useBreakpoints/

问题描述

大屏时，右侧抽屉大小合适

小屏时，右侧抽屉效果不好

在这里插入图片描述

需求

小屏时，右边抽屉宽度加宽 -（50%）
大屏时，右边抽屉宽度默认 -（30%）

解决需求

不需要使用窗口resize监听，动态获取屏幕尺寸

1、引入Vue相关东西 + 导出 bsInfo 对象

tuils/browser.js

/* 
@设备尺寸 

tuils/browser.js
*/
import { reactive } from 'vue'

// 1. 引入
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

// 2. 实时响应屏幕尺寸
// 小屏幕时 sm为true，反之
// 其它 md lg 同理
const sm = breakpoints.smaller('sm')
const md = breakpoints.between('sm', 'md')
const lg = breakpoints.between('md', 'lg')
const xl = breakpoints.between('lg', 'xl')
const xxl = breakpoints.between('xl', '2xl')
const xxxl = breakpoints['2xl']


// 3. 响应式 bsInfo 对象
// 设备大小  | 动态数据 
// 不需要使用窗口resize监听，实时获取屏幕尺寸
const bsInfo = reactive({
    size: {
        'sm': sm,
        'md': md,
        'lg': lg,
        'xl': xl,
        'xxl': xxl,
        'xxxl': xxxl,
    }
})

// 导出bsInfo 
export { bsInfo }

2、实时响应屏幕尺寸

实时响应屏幕尺寸
根据不同尺寸设置不同样式

view / HmeView.vue

<template>
 <!--...............-->

<!-- 
侧边抽屉

主要是 :size="drawer.size"
 -->
      <el-drawer
        :size="drawer.size"
      >
        <template #header="{ close, titleId, titleClass }">
          <h4 :id="titleId" :class="titleClass">设置</h4>

          <!-- 关闭抽屉按钮-->
          <el-button icon="Close" circle @click="close" />
        </template>
 <!--.......很多html........-->
      </el-drawer>
</template>

<script setup>
// 引入 watch  reactive
import { reactive, watch} from "vue";

// 1、引入browser.js
import { bsInfo } from "../utils/browser";

console.log(bsInfo.size);

// 抽屉配置（响应式）
const drawer = reactive({
  // 是否显示
  visible: false,
  size: bsInfo.size.sm === true ? "50%" : "30%",
});


//  监听 bsInfo.size 属性
// 屏幕尺寸发生变化就修改抽屉宽
watch(bsInfo.size, (_) => {
  // 是小设备
  if (_.sm === true) {
    drawer.size = "50%";
  } else {
  // 非小设备
    drawer.size = "30%";
  }
});
</script>