Vue前端项目-首页-左侧菜单栏-根据设备决定侧边栏的隐藏情况

最新推荐文章于 2024-06-11 10:03:57 发布

踏浪

最新推荐文章于 2024-06-11 10:03:57 发布

阅读量1.4w

点赞数 9

分类专栏： vue 文章标签：动态显示侧边栏检测移动端移动端隐藏侧边栏

本文链接：https://blog.csdn.net/u010559460/article/details/105268926

版权

本文介绍了在Vue前端项目中如何实现根据设备类型动态显示或隐藏侧边栏。通过创建设备处理文件、在Vuex中定义全局变量device、监听设备变化及调整样式，实现了在移动端隐藏侧边栏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.1、定义 device 变量,并提供修改方法

2.2、提供 device 的get方法

2.3、在进入首页或翻转屏幕时，重新设置 device 的值

实现效果：

步骤：

1、当进入 index 页面，判断当前设备是否是移动端设备，在控制台输出一下

2、当如果设备发生翻转的情况，可能会改变当前设备屏幕的分辨率，因此在发生翻转，再次判断当前设备是否是移动端设备，在控制台输出一下

3、需要在 Vuex 中使用 全局变量 state.device（值为''mobile''表示移动端, 为"desktop"表示桌面端）来存储当前的设备，在步骤1的时候给这个 state.device 赋值，在步骤2时候，判断一下是否要改变 state.device 的值

4、为这个移动端设备隐藏侧边栏添加样式

5、动态的给 index 页面侧边栏添加隐藏样式

补充：

如果判断当前设备是 移动设备还是桌面端设备？

在项目中规定，屏幕分辨率宽度 > 992 算是桌面端设备, 其余的算移动端设备

1、完成步骤1和2

1.1、设备处理文件

新建 src / layout / mixin / ResizeHandle.js 文件, 内容

const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design

export default {
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler)
  },
  mounted() {
    const isMobile = this.$_isMobile()
    console.log('isMobile=' + isMobile)
  },
  methods: {
    $_isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < WIDTH
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile()
        if (isMobile) {
          console.log('当前是移动端设备')
        } else {
          console.log('当前是桌面端设备')
        }
      }
    }
  }
}

1.2、主页中引用步骤1.1创建文件

在 src / layout / index.vue 文件中

import ResizeMixin from './mixin/ResizeHandler'

mixins: [ResizeMixin]

具体代码:

<template>
  <div
    class="app-wrapper"
    :class="classObj"
  >
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <navbar />
      <app-main />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import AppMain from './components/AppMain.vue'
// import { AppMain, Navbar, Sidebar } from './components'
import { Sidebar, Navbar, AppMain } from './components'
import { mapState } from 'vuex'
import ResizeMixin from './mixin/ResizeHandler'
export default {
  name: 'Lay

最低0.47元/天解锁文章