更改 Rad SideDrawer 的内容（原为 'Second (third,...) Side Drawer'

Question

应该很简单，不过我在这里问一下，也许其他人可以用。

如何添加第二个侧边抽屉？

我已经将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();

现在怎么办？

Answer 1

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

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

Answer 2

我尝试了@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' }) 
    ]
  )
}

}).$开始()

两者都在条件上画了一个 unexpected token 错误。

Answer 3

并且，为了好玩，尝试将整个内容包装在条件中。

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。

Answer 4

好的，知道了。我没有尝试将 slot: 'drawerContent' 的内容从 DrawerContent.vue 更改为 DrawerContentL2.vue，而是将它们放在两个不同的文件中，并使用主 DrawerContent.vue 来选择哪个。

感谢 Alligator.io 提供的提示。 Swappable Dynamic Components in Vue.js

新的 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>

当然，每个组件文件都必须声明它的名称：

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

更改 Rad SideDrawer 的内容（原为 'Second (third,...) Side Drawer'

Change Content of Rad SideDrawer (was 'Second (third,...) Side Drawer'

nativescript

nativescript-vue