我想在我的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>
任何帮助将不胜感激。
答案 0 :(得分: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厨房用皮 ,以进行timeline演示。