Изменить содержимое Rad SideDrawer (был «Второй (третий, ...) боковой ящик» - PullRequest
Новая
       10

Изменить содержимое Rad SideDrawer (был «Второй (третий, ...) боковой ящик»

0 голосов
/ 29 января 2020

Должно быть довольно просто, но если я спрошу это здесь, возможно, другие могут использовать.

Как добавить второй боковой ящик?

Я скопировал DrawerContent.vue в DrawerContentL2.vue и изменил содержимое.

И добавил 

import DrawerContentL2 from "./components/DrawerContentL2";

в мое приложение. js

И оригинальное приложение. js выглядит как 

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

Что теперь?

Ответы [ 4 ]

0 голосов
/ 05 февраля 2020

ОК, понял. Вместо того, чтобы пытаться изменить содержимое slot: 'drawerContent' с DrawerContent.vue на DrawerContentL2.vue, я просто поместил их в два разных файла и использовал основной DrawerContent. vue, чтобы выбрать какой.

Спасибо на Alligator.io за советы о том, как. Сменные Dynami c Компоненты в 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() {
        ...
0 голосов
/ 05 февраля 2020

Я попробовал то, что, по моему мнению, @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 ()

Оба нарисовал ошибку unexpected token на условном.

0 голосов
/ 05 февраля 2020

И, ради интереса, попытался обернуть все это в условное выражение. 

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.

0 голосов
/ 30 января 2020

Для NativeScript UI RadSideDrawer вы должны поместить второй в содержимое root.

Или, в качестве альтернативы, вы можете использовать nativescript- vue -multi-box Игорь Ранджелови c, который был специально написан для функциональности нескольких ящиков.

...