Framework7组件在Vue2中不起作用

Question

我想在Vue应用程序中添加f7时间轴组件。

我在app.js文件中添加了Framework7和Framework7Vue。 其他Framework7组件（例如<f7-button>和<f7-progressbar>可以正常工作。 但是，当我使用<f7-timeline> ，请在控制台中输入以下错误：

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？ 对于递归组件，请确保提供“名称”选项。

在发现

--->在src / pages / timeline / timeline.vue

  <F7View> <F7App> <App> at src/app.vue <Root> 

<template>
    <f7-page>

        <f7-timeline>
            <f7-timeline-item day="21" month="DEC" inner content="Some text goes here"></f7-timeline-item>
            <f7-timeline-item day="22" month="DEC" inner content="Another text goes here"></f7-timeline-item>
        </f7-timeline>

        <f7-button>Button Text</f7-button>
        <f7-progressbar :progress="20"></f7-progressbar>
    </f7-page>
</template>

任何帮助将不胜感激。

Answer 1

f7-timeline已由Framework7 Vue.js V1及其不推荐使用。 在最新版本（4.1.1）中，您可以使用常规HTML来显示时间轴，如下所示：

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-item-date">21 <small>DEC</small></div>
    <div class="timeline-item-divider"></div>
    <div class="timeline-item-content">
      <div class="timeline-item-inner">
        <div class="timeline-item-time">12:30</div>
        <div class="timeline-item-title">Title</div>
        <div class="timeline-item-subtitle">Subtitle</div>
        <div class="timeline-item-text">Text</div>
      </div>
    </div>
  </div>
  <div class="timeline-item">
    ... another timeline item ...
  </div>
</div>

有关更多信息，您可以检查Framework7 Vue.js厨房外观以进行时间轴演示。