スポンサースポンサーになる

Vue コンポーネント拡張

Vue がアプリをマウントし、Framework7 を初期化した後、Framework7 の初期化されたインスタンスと、framework7-vue パッケージからインポートできるその他の便利なプロパティにアクセスできるようになります。

f7ready

Framework7 が完全に初期化されたときに実行されるコールバック関数です。Framework7 API にアクセスする必要がある場合、コンポーネントで使用すると便利です。そして、準備ができていることを確認してください。そのため、すべての Framework7 関連のロジックをこのコールバックに配置しても安全です。引数として、初期化された Framework7 インスタンスを受け取ります。例えば

<template>
  ...
</template>
<script>
  import { f7ready } from 'framework7-vue';

  export default {
    ...
    mounted() {
      f7ready((f7) => {
        f7.dialog.alert('Component mounted');
      });
    },
  };
</script>

f7

Framework7 のメインの初期化されたインスタンス。Framework7 API を使用できます。

Framework7 インスタンスにアクセスした時点で既に初期化されていることが確実な場合は、インポートして直接使用できます。

<template>
  ...
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    ...
    methods: {
      doSomething() {
        f7.dialog.alert('Hello world');
      }
    },
  };
</script>

テーマ

現在使用されているテーマ (iOS または MD) に関する情報を含むブール値プロパティを持つオブジェクトです: theme.ios、theme.md。

<template>
  ...
</template>
<script>
  import { theme } from 'framework7-vue';

  export default {
    ...
    mounted() {
      if (theme.ios) {
        console.log('Currently active theme is iOS-theme')
      }
    },
  };
</script>

f7route と f7router

ルーターインスタンスと現在のルートは、props 経由でルーターコンポーネントに渡されます。

このプロパティは、ルーターでロードされたコンポーネント (例: ページ、ルーティング可能なモーダル、ルーティング可能なタブ) でのみ使用できます。「より深い」子コンポーネントでこのプロパティにアクセスする必要がある場合は、props を使用して渡す必要があります。

<template>
  ...
</template>
<script>
  export default {
    // define props so the component will receive it
    props: {
      f7route: Object,
      f7router: Object,
    },
    ...
    mounted() {
      console.log(this.f7route.url)
    },
    methods: {
      navigate() {
        this.f7router.navigate('/some-page/')
      }
    }
  };
</script>

f7route は現在のルートで、次のプロパティを持つオブジェクトです。

このドキュメントの改善
このページについて