vue.js - Framework7 组件在 Vue2 中不起作用
问题描述
我想在我的 Vue 应用程序中添加f7-timeline组件。
我在 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>
任何帮助将不胜感激。
解决方案
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 皮肤的时间线演示。
推荐阅读
- javascript - 单击按钮时未显示结果 - HTML、JavaScript
- java - 如何实时远程调试更改
- prolog - Prolog 中的“循环”,用 `fail` 替换目标
- javascript - 如何从 JSON 数组中获取值
- bash - 从一个文件中删除另一个文件中没有密钥的行
- python - Python pandas - 基于其他列的新列(字符串)
- azure - 并行更新管理 - Azure
- python - 在 CSV 列 python 中查找差异
- system-verilog - 是否可以使用带有 DPI 的打包结构
- amazon-web-services - CloudFormation中多个ECS服务定义之间如何使用同一套环境变量