下载@vueuse/core

npm i @vueuse/core

useBreakpoints | 响应式

  • 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/

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

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

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

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

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

End

2023/1/7 2:57 辑


Logo

前往低代码交流专区

更多推荐