如何使用 nativescript-vue MultiDrawer 实现多帧？

Question

我使用的是 RadSideDrawer，但现在我想尝试 multidrawer。

repo 自述文件说...

<MultiDrawer>
  <StackLayout slot="left">
    <Label text="Im in the left drawer" />  
  </StackLayout>

  <Frame /> <!-- main content goes into the default slot -->
</MultiDrawer>

什么是默认槽？

我的 ma​​in.ts 文件...

Vue.use(MultiDrawer)

new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()

在使用 RadSideDrawer 时，我正在向组件添加菜单并将菜单添加到所有其他视图。

所有 nativescript 市场使用 render: h => h('frame', [h(HelloWorld)]) 接受 Playing with Shadows。

如果我需要render: h => h("frame", [h(backendService.isLoggedIn() ? routes.home : routes.login)])等条件导航，如何实现多帧

• 我应该在哪里添加<MultiDrawer>标签？
• 我应该在哪里添加主要内容？
• 有没有使用 multidrawer 的演示项目？

Answer 1

这取决于您实际需要什么。抽屉本身只不过是一个最多有 5 个插槽的组件：left, right, top, bottom and default。

frame是一个负责导航的元素，它跟踪它的backstack，可以导航到不同的页面，可以管理backstack和clearHistory，backstackVisible...

您可以根据自己的需要组合这些。如果您需要一个在“已注销”页面（这些不需要抽屉）和“已登录”页面之间导航的框架，您有多种选择：

1. 将MultiDrawer 设为您的根元素，并将单个框架添加到default 插槽。切换是否根据当前位置启用抽屉（这需要nativescript-vue-navigator 之类的东西来跟踪当前的“路线”）。

render: h => h('frame', [h(App)])

与

相同

<Frame>
  <App />
</Frame>

如果我需要更改根元素，我通常将其更改为

render: h => h(App)

并在App组件内写入所有元素：

<MultiDrawer :enabled="isLoggedIn">
  <!-- left slot left out but would go here -->

  <!-- a navigator in the default slot -->
  <Navigator :defaultRoute="isLoggedIn ? '/home' : '/login'"/>
</MultiDrawer>

1. 使用多个帧，一帧作为根帧，ID 类似于“authFrame”。 在此框架中导航“已注销”身份验证页面和“已登录”主页。 在主页上，添加MultiDrawer 和第二个Frame 作为default 插槽中的内容。

  <!-- a pseudo code example of the structure, the different pages would be $navigateTo'd and not actually nested as child elements -->
  <Frame id="authFrame">
    <LoginPage/>
    <RegisterPage/>
    <MainPage>
      <MultiDrawer>
        <Frame/> <!-- the frame to navigate "logged in" pages -->
      </MultiDrawer>
    </MainPage>
  </Frame>