Question

我在我的package.json中使用

@ ionic / core：“ ^ 4.0.3”，
@ ionic / vue：“ 0.0.4”，
vue：“ ^ 2.6.10”，
vue-router：“ ^ 3.0.6”

此外：

我正在使用@ ionic / vue中的IonVueRouter

我已经编写了一个IonVuePage组件，该组件还有两个其他组件，即HeaderSection（<ion-toolbar>）和TabBar（<ion-tabs>）。在这些组件之间，我添加了一个标签，以在此默认布局内添加其他组件。但是，如果我在IonVuePage组件的<slot/>标签内部的新组件（例如Home组件）中使用了一个简单的离子按钮，则该按钮在以下情况下不可单击：

我将其包装在<ion-buttons>标签或
我删除了IonVuePage组件的TabBar组件。

什么可以解释这种行为？

在结合<ion-tabs>和IonVueRouter时是否出错？我可以同时使用吗？

我注意到，TabBar所在的位置是重叠的：如果将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'),
    },
  ],
});

我感谢任何形式的帮助或建议。问候

离子4 + vue.js /离子按钮在使用离子标签时无法点击？

0 个答案: