2021-02-25

Vue3的点击隐藏显示功能

前言：

• provide：提供，相当于set
• inject：注入，相当于get
• vue的ref属性创建内部数据，可以是布尔值（通过获取布尔值来判断显示隐藏）
• router.afterEach(）接受一个函数，路由变化时执行

一、点击隐藏点击显示

//app.vue 
setup() {
    const menuVisible = ref(false)
    provide('menuVisible', menuVisible); //set
}

//点击的组件
<span @click="toggalMenu">xxx</span>

setup() {
    const menuVisible = inject<Ref<boolean>>('menuVisible'); // get
    const toggalMenu = () => {
      menuVisible.value = !menuVisible.value; //取反
    };
    return {toggalMenu};
  }

//需隐藏显示的组件
<div v-if="menuVisible">隐藏显示的内容</div>
setup() {
    const menuVisible = inject<Ref<boolean>>('menuVisible'); // get
    return {menuVisible};
  }

二、移动端适配

宽度小于500时，默认隐藏，点击显示

setup() {
    const width = document.documentElement.clientWidth; //获取屏幕宽度
    const menuVisible = ref(width >= 500); //简化 width<500? false:true
    provide('menuVisible', menuVisible); //set
  }

三、移动端点击路由后隐藏

setup() {
    const width = document.documentElement.clientWidth;
    const menuVisible = ref(width >= 500); //简化 width<500? false:true
    provide('menuVisible', menuVisible); //set
    if (width <= 500) {
      router.afterEach(() => { //路由变化时执行
        menuVisible.value = false;
      });
    }
  }