Framework7 组件在 Vue2 中不起作用答案

【问题标题】：Framework7 component not works in Vue2Framework7 组件在 Vue2 中不起作用
【发布时间】：2019-08-07 07:53:15
【问题描述】：

我想在我的 Vue 应用中添加 f7-timeline 组件。

我在 app.js 文件中添加了 Framework7 和 Framework7Vue。 <f7-button> 和 <f7-progressbar> 等其他 Framework7 组件可以正常工作。但是当我使用<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>

任何帮助将不胜感激。

【问题讨论】：

标签： vue.js vuejs2 vue-component html-framework-7

【解决方案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 Kitchen 皮肤 以获取 timeline 演示。

【讨论】：