iT邦幫忙

0

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

  • 分享至 

  • xImage
<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套件
感謝各位
/images/emoticon/emoticon41.gif

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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
咪路
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');
  },
};
0

你可以先宣告一個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';
    }    
  },
FireK iT邦新手 4 級 ‧ 2022-09-16 16:50:02 檢舉

感謝回覆
但該方法跟我當前的方法應該是雷同的

不知道有沒有方法可以不用自己寫變數切換就可以做到vertical轉換成horizontal

好像只有這種方法可行

我要發表回答

立即登入回答