el-menu的页面宽度缩小成一定程度变成三条杠收缩菜单

这个是我在做个人博客网页时，想实现的一个功能，因为在网上没有搜到，我就想着自己写一个。

template中的内容

<el-menu  mode="horizontal"
              class="el-menu-header"
              :ellipsis="false"
              :router="true">
      <MyInput
          ref="sRef"
          :initial-width="0"
          :expansion-width="300"
          @keyup.enter="search"
      />
      <el-menu-item index="/study" v-show="!isShrink">
        学习
      </el-menu-item>
      <el-menu-item index="/game" v-show="!isShrink">
        游戏
      </el-menu-item>
      <el-menu-item index="/life" v-show="!isShrink">
        生活
      </el-menu-item>
      <el-menu-item index="/tools" v-show="!isShrink">
        工具
      </el-menu-item>
      <el-menu-item index="/concatMe" v-show="!isShrink">
        联系我
      </el-menu-item>
      <el-sub-menu
          index="123"
          v-show="isShrink"
      >
        <template #title><img src="@/assets/menu.png" style="width: 20px"></template>
        <el-menu-item index="/study">
          学习
        </el-menu-item>
        <el-menu-item index="/game">
          游戏
        </el-menu-item>
        <el-menu-item index="/life">
          生活
        </el-menu-item>
        <el-menu-item index="/tools">
          工具
        </el-menu-item>
        <el-menu-item index="/concatMe">
          联系我
        </el-menu-item>
      </el-sub-menu>
 </el-menu>

实现方法

使用一个变量作为表示是否展示收缩的值，然后监听窗口变化。

我这里是小于700px时变化

const isShrink=ref(false)
const handleResize=()=>{
  let windowWidth=window.innerWidth
  if(windowWidth<700)isShrink.value=true
  else isShrink.value=false
}
window.addEventListener('resize',handleResize)
handleResize()

tip：想要menu的小三角去掉的话（subMenu放在el-sub-menu上）

/deep/ .subMenu .el-icon{
  display: none;
}