如何使用 Framework7 + Vue 在面板中创建脚

Question

我正在使用一个网站，我想将 Framework7 与 Vue 结合使用。

他创建了一个侧面板，里面有一个列表。

现在我想在这个面板中创建一个图标，但它位于它的末尾：一个退出图标。有人可以帮帮我吗？

在我的 myLeftPanel.vue 文件中：

<template>
  <f7-panel left cover theme-auto :visible-breakpoint="960">
    <f7-list media-list>
      <f7-list-item link="#">
        <img slot="media" src="https://image.flaticon.com/icons/svg/2943/2943218.svg" width="80" />
        <a href>Enlace 1</a>
      </f7-list-item>
      <f7-list-item
        link="#"
      >
        <img
          slot="media"
          src="https://banner2.cleanpng.com/20180410/zje/kisspng-borderlands-2-borderlands-3-tales-from-the-borderl-alphabet-collection-5acd7b9d83f218.3032657615234159655405.jpg"
          width="80"
        />
      </f7-list-item>
      <f7-list-item
        link="#"
      >
        <img
          slot="media"
          src="https://cdn.icon-icons.com/icons2/1070/PNG/512/darth-vader_icon-icons.com_76959.png"
          width="80"
        />

      </f7-list-item>
    </f7-list>
  </f7-panel>
</template>

<script>

  import myLeftPanel from '../components/myLeftPanel'

  export default {
    components:{
        'myLeftPanel': myLeftPanel
      },
    mounted() {
      this.$f7ready((f7) => {
      });
    }
  }
</script>

Answer 1

您可以在面板内创建视图并添加工具栏

 <f7-panel left>
  <f7-view>
    <f7-page>
      <f7-toolbar position="bottom">
        <f7-link>Left Link</f7-link>
        <f7-link>Right Link</f7-link>
      </f7-toolbar>
      <Your content here />
    </f7-page>
  </f7-view>
</f7-panel>