Login Screen Vue Component (ログインスクリーン)

ログイン画面コンポーネント

以下のコンポーネントが含まれています。

f7-login-screen - ログイン画面の要素
f7-login-screen-title - ログイン画面のタイトル要素

ログイン画面のプロパティ

Prop	Type	Default	Description
<f7-login-screen> properties
opened	boolean	false	ログイン画面の開閉や、初期状態の設定を行います。
animate	boolean		モーダルの開閉をアニメーションで行うかどうか。
container-el	HTMLElement string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)

ログイン画面のイベント

Event	Description
<f7-login-screen> events
loginscreen:open	Login Screenがオープニングアニメーションを開始するとイベントが発生します。
loginscreen:opened	ログイン画面のオープニングアニメーションが完了した後にイベントが発生する
loginscreen:close	ログイン画面が閉じるアニメーションを開始したときにイベントが発生する
loginscreen:closed	ログイン画面のクロージングアニメーションが完了するとイベントが発生する

ログイン画面のvモデル

ログイン画面コンポーネントは opened のプロップで v-model をサポートします。

<template>
  <f7-page>
    <f7-login-screen v-model:opened="isOpened">
      ...
    </f7-login-screen>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

ログイン画面のオープンとクローズ

ログイン画面のopen()/close()メソッドに加えて、ログイン画面を開いたり閉じたりすることができます。

Login Screen APIを使用します。
openenedのpropにtrueまたはfalse`を渡す
関連する login-screen-open プロパティを持つリンクまたはボタンをクリックして (開くために)、login-screen-close プロパティを使って (閉じるために)

Examples

<template>
<f7-page>
  <f7-navbar title="Login Screen"></f7-navbar>
  <f7-block>
    <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:</p>
  </f7-block>

  <f7-list>
    <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
  </f7-list>

  <f7-block>
    <f7-button raised large fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
  </f7-block>

  <f7-block>
    <f7-button raised large fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
  </f7-block>

  <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
    <f7-page login-screen>
      <f7-login-screen-title>Framework7</f7-login-screen-title>
      <f7-list form>
        <f7-list-input
          label="Username"
          type="text"
          placeholder="Your username"
          :value="username"
          @input="username = $event.target.value"
        ></f7-list-input>
        <f7-list-input
          label="Password"
          type="password"
          placeholder="Your password"
          :value="password"
          @input="password = $event.target.value"
        ></f7-list-input>
      </f7-list>
      <f7-list>
        <f7-list-button @click="signIn">Sign In</f7-list-button>
        <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
      </f7-list>
    </f7-page>
  </f7-login-screen>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    data() {
      return {
        loginScreenOpened: false,
        username: '',
        password: '',
      };
    },
    methods: {
      signIn() {
        f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
          f7.loginScreen.close();
        });
      },
    },
  }
</script>

独立したログイン画面ページ

<template>
<f7-page no-toolbar no-navbar no-swipeback login-screen>
  <f7-login-screen-title>Framework7</f7-login-screen-title>
  <f7-list form>
    <f7-list-input
      label="Username"
      type="text"
      placeholder="Your username"
      :value="username"
      @input="username = $event.target.value"
    ></f7-list-input>
    <f7-list-input
      label="Password"
      type="password"
      placeholder="Your password"
      :value="password"
      @input="password = $event.target.value"
    ></f7-list-input>
  </f7-list>
  <f7-list>
    <f7-list-button @click="signIn">Sign In</f7-list-button>
    <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
  </f7-list>
</f7-page>
</template>
<script>
  import { f7 } from 'framework7-vue';

  export default {
    props: {
      f7router: Object,
    },
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      signIn() {
        const self = this;

        f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
          self.f7router.back();
        });
      },
    },
  }
</script>