Компонент Framework7 не работает в Vue2 - PullRequest
Новая
       31

Компонент Framework7 не работает в Vue2

0 голосов
/ 16 марта 2019

Я хочу добавить f7-timeline компонент в мое приложение Vue.

Я добавил Framework7 и Framework7Vue в мой файл app.js.Другие компоненты Framework7, такие как <f7-button> и <f7-progressbar>, работают правильно.Но когда я использую <f7-timeline>, выдайте эту ошибку в консоли:

[Vue warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент?Для рекурсивных компонентов не забудьте указать опцию «name».

находится в

---> в 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>

Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 16 марта 2019

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 Кухонный скин для график демо.

...