如何使用nativescript-vue MultiDrawer实现Multiple Frames？

Question

我之前使用的是 RadSideDrawer，但现在我想尝试使用多抽屉。

repo 自述文件说...

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

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

什么是默认插槽？

我的main.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...

您可以根据需要组合这些。如果您需要在 "logged out" 页面（这些不需要抽屉）和 "logged in" 页面之间导航的框架，您有多种选择：

使 MultiDrawer 成为您的根元素，并将单个框架添加到 default 插槽。切换是否基于当前位置启用抽屉（这需要类似 nativescript-vue-navigator 的东西来跟踪当前 "route"）。

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>

使用多个框架，一个框架作为根框架，id像"authFrame"。在此框架中导航 "logged out" 个授权页面和 "logged in" 个主页。在主页上，添加 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>

如何使用nativescript-vue MultiDrawer实现Multiple Frames？

How to implement Multiple Frames using nativescript-vue MultiDrawer?

nativescript-vue

什么是默认插槽？