赞助商成为赞助商

登录屏幕 Vue 组件

Login Screen Vue 组件代表登录屏幕组件。

登录屏幕组件

包含以下组件

登录屏幕属性

属性类型默认值描述
<f7-login-screen> 属性
opened布尔值false允许打开/关闭登录屏幕并设置其初始状态
animate布尔值模态框是应带动画打开/关闭还是不带动画打开/关闭
container-elHTMLElement
字符串		加载模态框的元素（默认为应用根元素）

登录屏幕事件

事件描述
<f7-login-screen> 事件
loginscreen:open在登录屏幕开始打开动画时触发事件
loginscreen:opened在登录屏幕完成打开动画后触发事件
loginscreen:close在登录屏幕开始关闭动画时触发事件
loginscreen:closed在登录屏幕完成关闭动画后触发事件

登录屏幕 v-model

登录屏幕组件在opened prop 上支持 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>
改善此文件
在此页面