【Vue3】Vue3实用的小东西 |动态检测屏幕尺寸
下载@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><el-drawer:size="drawer.size"><template #header="{ close, titleId, titleClass }"><h4 :id="titleId" :class="titleClass">设置h4><el-button icon="Close" circle @click="close" />template>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>
效果
1. 大屏幕时，抽屉宽30%
2. 小屏幕时 抽屉宽50%
相关
- useWindowSize 获取屏幕宽高
- 备用地址 https://vueuse.org/core/useWindowSize/
- useWindowScroll 屏幕滚动
- 备用地址 https://vueuse.org/core/useWindowScroll/
- useElementSize - 获取元素尺寸
- 备用地址 https://vueuse.org/core/useElementSize/
- session
- 备用地址 https://vueuse.org/core/useSessionStorage/
- useDark 动态切换主题
- 备用地址 https://vueuse.org/core/useDark/
- useObjectUrl 本地文件转url
- 备用地址 https://vueuse.org/core/useObjectUrl/
End
2023/1/7 2:57 辑
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！