在html內根據breakpoint改變邏輯(使用 vue2)

html breakpoint vue css

FireK 2022-09-16 10:47:13 ‧ 808 瀏覽

分享至

<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套件
感謝各位

froce iT邦大師 1 級 ‧ 2022-09-19 09:59:44 檢舉

https://element.eleme.io/#/zh-CN/component/layout

element UI 有自己的佈局組件，幹嘛不用？

FireK iT邦新手 4 級 ‧ 2022-09-20 00:09:47 檢舉

有是有，但el的佈局組件似乎沒辦法做到我上面想要的結果
我想依照當前breakpoint去做邏輯判斷，而不是只能做CSS切換

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

咪路

iT邦新手 5 級 ‧ 2022-09-17 21:16:42

最佳解答

export default {
  data() {
    return {
      media: matchMedia('(min-width: 768px)'),
      mode: 'horizontal',
    };
  },
  mounted() {
    this.media.addListener(
      ({matches}) => this.mode = matches ? 'vertical':'horizontal');
  },
};

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2022-09-16 13:04:45

你可以先宣告一個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';
    }    
  },