Vue - 在父模板中的多個位置之一渲染組件

我正在構建一個響應式導航欄 - 使用子組件的組件，並且我需要爲移動和桌面版本顯示不同的組件 - 標記不允許我很容易做到這一點。目前我在2個地方複製了一個元素，並且一次隱藏其中的一個元素（取決於窗口大小），只要用戶不更改窗口大小（如果它變得難看 - 例如可見的彈出窗口對於桌面寬度將消失，如果窗口減少到移動寬度）。Vue - 在父模板中的多個位置之一渲染組件

編輯

+現在我在裏面導航欄2處顯示組件（搜索領域），看到我需要顯示它無論是桌面版（導航欄面板上），和移動版本（漢堡包下拉菜單，這是隱藏的桌面）。這裏是解釋我的意思的代碼示例，子組件的名稱是search-records（css框架是Bulma）。這個想法是一次只顯示一個「<搜索記錄」 - 但我不能使用媒體查詢或v-if方法，因爲我必須同步這兩個組件，而且我很好奇是否有一些簡單的方法來處理這個問題：

<header class="nav"> 
    <div class="container"> 
     <div class="nav-left"> 
      Logo placeholder 
     </div> 
     <div class="nav-right is-hidden-tablet"> 
      <a class="nav-item is-pulled-right"> 
       <search-records></search-records> 
      </a> 
     </div> 
     <span class="nav-toggle"> 
      <span></span> 
      <span></span> 
      <span></span> 
     </span> 
     <div class="nav-right nav-menu"> 
      <a class="nav-item is-pulled-right is-hidden-mobile"> 
       <search-records></search-records> 
      </a> 
     </div> 
    </div> 
</header>

來源

2017-07-17 bruddah

你在問什麼是重排DOM響應媒體查詢的最佳方式？ –

你在問什麼？你有什麼嘗試但沒有工作？另外：沒有代碼，沒有人能夠弄清楚你做了什麼。 – herrbischoff

@herrbischoff - 我編輯過的問題。 – bruddah

嘗試這種方法。以下是模板的外觀。

<template> 
    <div class="wrapper"> 
    <div v-if="isMobile" class="desktop-view">Desktop</div> 
    <div v-else class="mobile-view">Mobile</div> 
    </div> 
</template>

您的組件腳本應該看起來像這樣。

export default { 
    data() { 
    isMobile: false, 
    }, 

    methods: { 
    onResize() { 
     this.isMobile = window.innerWidth < 720 
    }, 
    }, 

    mounted() { 
    this.onResize() 
    window.addEventListener('resize', this.onResize) 
    }, 

    beforeDestroy() { 
    window.removeEventListener('resize', this.onResize) 
    } 
}

來源

2017-07-17 12:25:11 Ikbel

Vue - 在父模板中的多個位置之一渲染組件

回答

相關問題