Question

我正在构建一个响应式导航栏 - 使用子组件的组件，我需要为移动和桌面版本显示不同的组件 - 标记不允许我轻松地这样做。目前我在2个地方复制了一个元素，并且一次隐藏其中一个元素（取决于窗口大小），只要用户不改变窗口大小就可以了（如果它变得很难看 - 例如弹出窗口可见如果窗口缩小到移动设备的宽度，桌面宽度将消失。

修改

+现在我在Navbar中的2个位置显示组件（搜索字段），看到我需要将它显示为桌面版（在导航栏面板上）和移动版（汉堡包下拉列表，它是为桌面隐藏的）。这里是代码示例解释我的意思，子组件的名称是搜索记录（css框架是Bulma）。想法是只显示“＆lt; search-records＆gt;”中的一个一次 - 但我不能使用媒体查询或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>

Answer 1

尝试这种方法。以下是模板的外观。

<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)
  }
}

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

1 个答案: