<template>
<el-menu
mode="horizontal"
>
......
</el-menu>
</template>
我想在畫面寬度為768時,將mode改為vertical
目前的作法是透過window.onresize去做到寬度變換的監聽(參考下面的code)
<template>
<el-menu
:mode="varible === 'mobile' ? 'vertical' : 'horizontal'"
>
......
</el-menu>
</template>
請問大家有其他方法可以直接在html內依照當前breakpoint去做邏輯判斷嗎?
有使用vue框架、element ui套件
感謝各位
export default {
data() {
return {
media: matchMedia('(min-width: 768px)'),
mode: 'horizontal',
};
},
mounted() {
this.media.addListener(
({matches}) => this.mode = matches ? 'vertical':'horizontal');
},
};
你可以先宣告一個data值, 然後再初始化中就先定義好。
<template>
<el-menu
:mode="menu_mode"
>
......
</el-menu>
</template>
data() {
return {
menu_mode = 'horizontal'
}
},
created() {
let self = this;
//寫判斷式
if(self.varible === 'mobile'){
self.menu_mode = 'vertical';
}
},