element ui中横向menu与媒体查询

记录一下随手写的小功能

<el-menu 
                mode="horizontal" 这是一个横向的menu,elementui有个坑，就是横向的
    menu,它的最后一项会默认省略
                class="menu"
                :ellipsis="status" 将这个值设为true的时候就省略，为false的时候就显示，
这里我用了响应式，是为了简单配合一下媒体查询
        >
            <el-menu-item>
                <template #title>帮助</template>
                <el-icon><Message/></el-icon>
            </el-menu-item>
            <el-menu-item>
                <template #title>门店</template>
                <el-icon><House /></el-icon>
            </el-menu-item>
            <el-menu-item>
                <template #title>账户</template>
                <el-icon><User /></el-icon>
            </el-menu-item>
            <el-menu-item>
                <template #title>购物车</template>
                <el-icon><ShoppingTrolley /></el-icon>
            </el-menu-item>
        </el-menu>
        

js 代码
const status = ref(false) 一个状态数据

function screenChange(x) {
  if (x.matches) {
    status.value = true 屏幕尺寸小于1000只显示一部分
  }else{
    status.value = false 大于1000恢复
  }
}

const x = window.matchMedia("(max-width: 1000px)")
x.addEventListener('change',function(event){
    screenChange(event.target);
}) 监测函数


css 代码
@media screen and (max-width: 1000px){
    .menu{
        width: 100px;
    }
}
       
    }