Ionic 4 + vue.js / ионная кнопка не активируется при использовании ионных вкладок? - PullRequest
Новая
       13

Ionic 4 + vue.js / ионная кнопка не активируется при использовании ионных вкладок?

1 голос
/ 01 мая 2019

Я использую в моем package.json:

  • @ ионный / ядро: "^ 4.0.3",
  • @ ionic / vue: "0.0.4",
  • vue: "^ 2.6.10",
  • vue-router: "^ 3.0.6"

кроме того:

  • Я использую IonVueRouter из @ ionic / vue

Я написал компонент IonVuePage, который имеет два других компонента, HeaderSection (<ion-toolbar>) и TabBar (<ion-tabs>). Между этими компонентами я добавил тег, чтобы добавить другие компоненты внутри этого макета по умолчанию. Однако, если я использую простую ионную кнопку внутри нового компонента (например, компонента Home), который находится внутри тега <slot/> компонента IonVuePage, он не будет активен до:

  1. Я обертываю внутри тега <ion-buttons>, или
  2. Я удаляю компонент TabBar компонента IonVuePage.

Чем можно объяснить такое поведение?

Есть ли у меня ошибка при объединении <ion-tabs> и IonVueRouter? Могу ли я использовать оба?

Я заметил, что место, в котором размещается TabBar, перекрывает: borwser screenshot Если я установлю высоту diff на 10%, то кнопка будет кликабельной, но, к сожалению, TabBar больше не виден.

Вот мой код:

Компонент IonVuePage: 

<template>
  <ion-page
    class="ion-page"
    main>
    <header-section
      :title="title"
      :show-back-button="showBackButton"/>
    <slot name="content"/>
    <tab-bar/>
  </ion-page>
</template>

<script>
import TabBar from '@/components/page/TabBar';
import HeaderSection from '@/components/page/HeaderSection';

export default {
  name: 'IonVuePage',
  components: {
    TabBar,
    HeaderSection,
  },
...

Компонент TabBar: 

<template>
  <!-- Listen to before and after tab change events -->
  <ion-tabs
    @IonTabsWillChange="beforeTabChange"
    @IonTabsDidChange="afterTabChange">

    <ion-tab
      tab="home"/>
    <ion-tab
      tab="request"/>

    <template slot="bottom">
      <ion-tab-bar >

        <ion-tab-button tab="home">
          <ion-icon name="home"/>
          <ion-label>Schedule</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>

        <!-- Provide a custom route to navigate to -->
        <ion-tab-button tab="request">
          <ion-icon name="contacts"/>
          <ion-label>Request</ion-label>
        </ion-tab-button>

      </ion-tab-bar>
    </template>
  </ion-tabs>
</template>

Домашний компонент: 

<template>
  <ion-vue-page
    :title="welcometext"
    :show-back-button="true">
    <ion-content slot="content">

      <ion-button @click="changeToRequest">change to request page!</ion-button>

      <ion-buttons>
        <ion-button
          fill="solid"
          @click="showModal">show modal! </ion-button>
      </ion-buttons>

    </ion-content>
  </ion-vue-page>
</template>
  },
...

App.vue: 

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

router.js: 

import Vue from 'vue';
import { IonicVueRouter } from '@ionic/vue';
import Home from '@/views/Home';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history', // for not having the # in the URL
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/request',
      name: 'Requet',
      component: () => import('@/views/TestRequest'),
    },
  ],
});

Я ценю любую помощь или совет. С уважением

...