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

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

ログイン画面 Vue コンポーネントは、ログイン画面コンポーネントを表します。

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

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

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

プロパティタイプデフォルト説明
<f7-login-screen> プロパティ
openedbooleanfalseログイン画面を開閉し、初期状態を設定できます
animatebooleanモーダルを開閉するときにアニメーションを使用するかどうか
container-elHTMLElement
string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)

ログイン画面のイベント

イベント説明
<f7-login-screen> イベント
loginscreen:openログイン画面が開くアニメーションを開始するときにトリガーされるイベント
loginscreen:openedログイン画面が開くアニメーションが完了した後にトリガーされるイベント
loginscreen:closeログイン画面が閉じるアニメーションを開始するときにトリガーされるイベント
loginscreen:closedログイン画面が閉じるアニメーションが完了した後にトリガーされるイベント

ログイン画面 v-model

ログイン画面コンポーネントは、`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.vue
<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>

    <!-- example-hidden-start -->
    <f7-list strong inset-md outline-ios>
      <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
    </f7-list>
    <!-- example-hidden-end -->

    <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 v-model:opened="loginScreenOpened" class="demo-login-screen">
      <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 inset>
          <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 {
  f7Navbar,
  f7Page,
  f7LoginScreen,
  f7List,
  f7ListItem,
  f7Block,
  f7Button,
  f7LoginScreenTitle,
  f7BlockFooter,
  f7ListButton,
  f7ListInput,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7LoginScreen,
    f7List,
    f7ListItem,
    f7Block,
    f7Button,
    f7LoginScreenTitle,
    f7BlockFooter,
    f7ListButton,
    f7ListInput,
  },
  data() {
    return {
      loginScreenOpened: false,
      username: '',
      password: '',
    };
  },
  methods: {
    signIn() {
      const self = this;

      f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
        f7.loginScreen.close();
      });
    },
  },
};
</script>
このドキュメントを改善する
このページの内容