Nativescript 更改Rad侧抽屉（was'；第二（第三，…）侧抽屉'；

应该很简单，但如果我在这里问，也许其他人可以使用

如何添加第二个侧面抽屉

我已将

DrawerContent.vue

复制到

DrawerContentL2.vue

，并修改了内容

并补充说

import DrawerContentL2 from "./components/DrawerContentL2";

到我的app.js

原来的app.js看起来像

new Vue({
     render (h) {
        return h(
          App,
          [
            h(DrawerContent, { slot: 'drawerContent' }),
            h(Twisty, { slot: 'mainContent' })   
    ]
        )
  }
  }).$start();

---

现在怎么办？

对于NativeScript UI RadSideDrawer，您必须将第二个放在根目录的内容中

---

或者，您也可以使用Igor Randjelovic，它是专门为多抽屉功能编写的。

我尝试了@Manoj在这里提出的建议：

    new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(v-if (store.state.currentLevel == "L1"){DrawerContent} v-else {DrawerContentL2}, { slot: 'drawerContent' }),
          h(Home, { slot: 'mainContent' }) 
        ]
      )
    }
  }).$start() 

或者，或者

new Vue({ 
render (h) {
  return h(
    App,
    [
      h(if (store.state.currentLevel == "L1"){DrawerContent} else {DrawerContentL2}, { slot: 'drawerContent' }),
      h(Home, { slot: 'mainContent' }) 
    ]
  )
}

}).$start（）

---

两人都在条件上绘制了一个意外的标记。

为了好玩，他们尝试将整个事件包装在一个条件中

if(store.state.currentLevel == "L1"){ 
  new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(DrawerContent, { slot: 'drawerContent' }),
          h(Home, { slot: 'mainContent' }) 
        ]
      )
    }
  }).$start() }
else { 
  new Vue({ 
    render (h) {
      return h(
        App,
        [
          h(DrawerContentL2, { slot: 'drawerContent' }),
          h(LevelTwo, { slot: 'mainContent' })
         ] 
      )
        }
        }).$start(); } 

这将编译并运行，但仅在应用程序启动时运行。更改

currentLevel

不会更改

drawercontent

好的，明白了。 我没有尝试将

slot:'drawerContent'

的内容从

drawerContent.vue

更改为

DrawerContentL2.vue

，而是将它们放在两个不同的文件中，并使用主drawerContent.vue选择其中一个

感谢Alligator.io提供了如何使用的提示

新的DrawerContent.vue如下所示：

<template>
    <component :is="dynamicComponent"></component>
</template>

<script>

import DrawerContentL1 from "./DrawerContentL1";
import DrawerContentL2 from "./DrawerContentL2";

export default {
  components: {
    DrawerContentL1,
    DrawerContentL2
  },
  computed: {
    dynamicComponent() {
      if(this.$store.state.currentLevel=="L1") {
        return 'DrawerContentL1';
      } else {
        return 'DrawerContentL2';
      }
    }
  }
}
</script>

---

对不起，我没有说对：我只需要一个抽屉，只有在前10页之后，我需要用不同的内容（DrawerContent 2.vue）替换内容（DrawerContent.vue）。我在第二个文件中有一个文件。我只是不知道当用户导航到新的部分时如何调用它。您是否在问（根据您的评论）如何动态更改DroperContent？请添加更多详细信息。是。或者，更确切地说，为内容使用不同的文件。当用户浏览第二级页面时，抽屉中显示的不是DrawerContent.vue，而是DrawerContent l2.vue。我知道这很简单…在抽屉内容中使用slot或简单的v-if来呈现正确的组件，在达到第二级时切换slot/变量？是的，听起来不错。我还没反应过来。（我猜这就是尝试成为高中重新设计运动的领导者，同时学习编写本机应用程序和其他工作的结果。）一旦我修复了NativeScript主题：Core V2破坏了我的应用程序，就会让你知道主题V2有什么问题？

export default {
        name: "DrawerContentL1",
        mounted() {
        ...