0

我想在 Ionic Vue 中实现以下布局，最好使用原生组件。下面只是我想要的模式，我最感兴趣的是桌面行为：

Vue.createApp({
  data: () => ({
    isLeftOpen: false,
    isRightOpen: false
  }),
  methods: {
    toggleSidebar(side) {
      this[`is${side}Open`] = !this[`is${side}Open`];
    }
  }
}).mount('#app')
body { margin: 0; overflow: hidden; }
* { box-sizing: border-box; }
#app {
  height: 100vh;
  background-color: #f5f5f5;
}
main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
sidebar {
  background-color: white;
  display: block;
  padding: 1rem;
  width: 270px;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: transform .21s cubic-bezier(.5,0,.3,1);
  box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
}
sidebar[left] {
  left: 0;
  transform: translateX(-280px)
}
sidebar[right] {
  right: 0;
  transform: translateX(280px)
}
sidebar.open {
  transform: translateX(0);
}
sidebar button {
  width: 2rem;
  height: 2rem;
  position: absolute;
  border-radius: 1rem;
  border: 1px solid #f5f5f5;
  right: .5rem;
  top: .5rem;
  cursor: pointer;
  font-size: 1.5rem
  display: flex;
  align-items: center;
  justify-content: center;
}
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <main>
    <button @click="toggleSidebar('Left')">left</button>
    <button @click="toggleSidebar('Right')">right</button>
  </main>
  <sidebar left
           :class="{open: isLeftOpen}">
    Left sidebar
    <button @click="toggleSidebar('Left')">&times;</button>
  </sidebar>
  <sidebar right
           :class="{open: isRightOpen}">
    Right sidebar
    <button @click="toggleSidebar('Right')">&times;</button>
  </sidebar>
</div>

简而言之，我想要两个完全不相关的侧边栏，应该根据用户的选择在所有设备上独立打开/关闭。一次打开多个侧边栏不是好的用户体验的论点在这个项目上并没有真正站得住脚，因为它基本上是一个全屏地图，侧边栏包含各种控件和关于地图上的内容的信息。要求是用户可能希望打开两个侧边栏，但他们也可能希望它们都关闭，即使在大屏幕上，以最大化地图的显示部分。

我在这里有什么选择？只有一个“原生”侧边栏并使用自定义元素模仿第二个边栏，使用我自己的容器和我自己的类似于原生的菜单切换？我如何让这些在 Android 和 iOS 上看起来和表现得像“原生”？

这是我当前的布局，它实现了我想要的一切，除了打开一个侧边栏总是关闭另一个侧边栏。

我对 Ionic Vue 了解不多（今天开始使用它），但我在 Vue 中表现不错。Tbh，我发现 Ionic Vue 令人印象深刻。非常整洁，文档很棒。但我被困在这个起初似乎微不足道的布局问题上。

感谢您查看这个。

4

0 回答 0