时间戳

首页 > 解决方案 > 如何使用 nativescript-vue MultiDrawer 实现多帧？

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

问题描述

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

回购自述文件说...

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

标签： nativescript-vue

解决方案

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

Aframe是一个负责导航的元素，它跟踪它backstack并且可以导航到不同的页面，并且可以管理backstackwith 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>

推荐阅读