菜单切换功能

通过获取页面宽度，决定我的初始值是true还是false

// 在pc端时，目录不需要显示隐藏，一直显示就行true，让初始值为true没有切换按钮后面也就不需要切换，因为它是一直看得见的
// tips:通过获取页面宽度，决定我的初始值是true还是false

在APP.vue中，const width = document.documentElement.clientWidth;

1. 获取页面宽度
2. 添加三元运算判断
3. 因为之前 初始值直接设为false了，默认显示（小方块，点击方块用来显示隐藏目录），但是PC不需要出现小方块，添加判断，只有是在移动端时出现。
4. 所以在小于等于500的时候false展示。否则当为PC端时为true不展示

<template>
  <router-view/>
</template>

<script lang="ts">
import { ref, provide } from 'vue'
export default {
    name: 'App',
    setup(){
        const width = document.documentElement.clientWidth;
        // const menuVisible = ref(false)
        const menuVisible = ref(width <= 500 ? false : true);
        provide('menuVisible',menuVisible) //set

    }
}
</script>

图示

PC端不展示小方块,目录默认一直都在

移动端展示小方块，可通过点击方块进行目录的显示隐藏