下载@vueuse/core

npm i @vueuse/core

useBreakpoints | 响应式

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

---

参考链接

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

---

问题描述

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

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

---

需求

1. 小屏时，右边抽屉宽度加宽 -（50%）
2. 大屏时，右边抽屉宽度默认 -（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>

效果

1. 大屏幕时，抽屉宽30%

2. 小屏幕时 抽屉宽50%

相关

1. useWindowSize 获取屏幕宽高
   • 备用地址 https://vueuse.org/core/useWindowSize/

---

2. useWindowScroll 屏幕滚动
   • 备用地址 https://vueuse.org/core/useWindowScroll/

---

3. useElementSize - 获取元素尺寸
   • 备用地址 https://vueuse.org/core/useElementSize/

---

4. session
   • 备用地址 https://vueuse.org/core/useSessionStorage/

---

5. useDark 动态切换主题
   • 备用地址 https://vueuse.org/core/useDark/

---

6. useObjectUrl 本地文件转url
   • 备用地址 https://vueuse.org/core/useObjectUrl/

---

End

2023/1/7 2:57 辑

---