宝可梦UI项目——使用provide和inject实现aside点击切换是否显示

问题

在实际测试的过程中，发现手机使用时，侧边栏的存在会影响用户体验，于是想办法实现点击一次可以出现aside，再次点击可以消失的功能

思路：我们希望当⽤户点击topnav的时候隐藏aside，所以我们需要⼀

个变量叫做asideVisible来表示aside是否显示，当他为true时显示，为

false时隐藏。

问题1:若把这个变量放在topnav⾥⾯ aside将⽆法访问，若放在aside

⾥⾯同理。所以将这个变量放在app内

问题2:那么这个变量放在app⾥ 如何让topnav和aside访问到呢？ 在

app中通过provide来标记这个变量，使得这个变量可以被app的后代访

问。后代通过inject来对provide标记的变量进⾏访问

解决办法：

标记：

setup() {

const asideVisible = ref(false)//默认为false

provide('xxx',asideVisible) //提供xxx这个名字即可使⽤

asideVisible

}

获取：

setup() {

const asideVisible = inject<Ref<boolean>>('xxx')

}

}//Ref标记类型

之后绑定属性只有有asideVisible存在时出现aside

并且设置默认情况，在手机打开时默认不开启

setup() {
  router.afterEach(() => {
    if (width <= 500) {
      asideVisible.value = false
    }
  })
}

随后给按钮一个事件监听的事件，控制是否打开

这个功能就完成了。

---

此外为了优化体验，我们可以在手机使用的时候每切换一次路由都使得aside自动隐藏。

router.afterEach(() => {
  if (width <= 500) {
    asideVisible.value = false
  }
})

功能实现，优化结束。