登录屏幕

Framework7 带有现成的登录屏幕布局。它可以在页面内部或登录屏幕（嵌入）中使用，或作为独立模态使用。

登录屏幕布局

首先，让我们看看独立的登录屏幕布局。它的行为几乎与登录屏幕相同：

<div class="login-screen">
  <!-- Default view-page layout -->
  <div class="view">
    <div class="page login-screen-page">
      <!-- page-content has additional login-screen content -->
      <div class="page-content login-screen-content">
        <div class="login-screen-title">My App</div>
        <!-- Login form -->
        <form>
          <div class="list">
            <ul>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Username</div>
                  <div class="item-input-wrap">
                    <input type="text" name="username" placeholder="Username" />
                    <span class="input-clear-button"></span>
                  </div>
                </div>
              </li>
              <li class="item-content item-input">
                <div class="item-inner">
                  <div class="item-title item-label">Password</div>
                  <div class="item-input-wrap">
                    <input type="password" name="password" placeholder="Password" />
                    <span class="input-clear-button"></span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="list">
            <ul>
              <li>
                <a href="#" class="list-button">Sign In</a>
              </li>
            </ul>
            <div class="block-footer">Some text with login information.</div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

注意，<div class="login-screen"> 内的所有元素都是可选的，但你可以将它们用作登录表单的样板布局

登录屏幕 App 方法

让我们看看与登录屏幕相关的 App 方法：

app.loginScreen.create(参数)- 创建登录屏幕实例

  • 参数 - 对象. 带有登录屏幕参数的对象

方法返回创建的登录屏幕实例

app.loginScreen.destroy(el)- 销毁登录屏幕实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的登录屏幕元素或登录屏幕实例。

app.loginScreen.get(el)- 通过 HTML 元素获取登录屏幕实例

  • el - HTMLElement或字符串(使用 CSS 选择器)。登录屏幕元素。

方法返回登录屏幕实例

app.loginScreen.open(el, animate)- 打开登录屏幕

  • el - HTMLElement或字符串(使用 CSS 选择器)。要打开的登录屏幕元素。
  • animate - 布尔值. 带动画打开登录屏幕。

方法返回登录屏幕实例

app.loginScreen.close(el, animate)- 关闭登录屏幕

  • el - HTMLElement或字符串(使用 CSS 选择器)。要关闭的登录屏幕元素。
  • animate - 布尔值. 带动画关闭登录屏幕。

方法返回登录屏幕实例

登录屏幕参数

现在让我们看看创建登录屏幕所需的可用参数列表：

参数类型默认描述
elHTMLElement
字符串		登录屏幕元素。如果你已经在 HTML 中有登录屏幕元素，并想使用此元素创建新实例，则很有用
内容字符串完整的登录屏幕 HTML 布局字符串。如果你想动态创建登录屏幕元素，则很有用
animate布尔值true登录屏幕是否应该带动画打开/关闭。可以在.open()和.close()方法中覆盖。
containerElHTMLElement
字符串		模态挂载到的元素（默认为应用根元素）
on对象

带有事件处理程序的对象。例如：

var loginScreen = app.loginScreen.create({
  content: '<div class="login-screen">...</div>',
  on: {
    opened: function () {
      console.log('Login Screen opened')
    }
  }
})

登录屏幕方法和属性

所以要创建登录屏幕，我们必须调用：

var loginScreen = app.loginScreen.create({ /* parameters */ })

之后我们就有其初始化的实例（如loginScreen示例中上面的变量）以及有用的方法和属性：

属性
loginScreen.app链接到全局应用实例
loginScreen.el登录屏幕 HTML 元素
loginScreen.$el带有登录屏幕 HTML 元素的 Dom7 实例
loginScreen.params登录屏幕参数
loginScreen.opened指示登录屏幕是否打开的布尔属性
方法
loginScreen.open(animate)打开登录屏幕。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画打开
loginScreen.close(animate)关闭登录屏幕。其中
  • animate - 布尔值(默认true) - 定义是否应使用动画关闭
loginScreen.destroy()销毁登录屏幕
loginScreen.on(事件上触发, 处理程序)添加事件处理程序
loginScreen.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
loginScreen.off(事件上触发, 处理程序)移除事件处理程序
loginScreen.off(事件上触发)移除指定事件的所有处理程序
loginScreen.emit(事件上触发, ...args)在实例上触发事件

可以使用链接上的特殊类和数据属性来打开和关闭所需的登录屏幕（如果你在 DOM 中有它们）：

  • 要打开登录屏幕，我们需要添加 "login-screen-open" 类

  • 要关闭登录屏幕，我们需要添加 "login-screen-close" 类

  • 如果你在 DOM 中有多个登录屏幕，你需要通过附加data-login-screen=".my-login-screen"属性在这个 HTML 元素上指定适当的 Sheet

根据上述说明：

<!-- In data-login-screen attribute we specify CSS selector of login screen we need to open -->
<p><a href="#" data-login-screen=".my-login-screen" class="login-screen-open">Open Login Screen</a></p>

<!-- And somewhere in DOM -->
<div class="login-screen my-login-screen">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
          <div class="title">Login Screen</div>
          <div class="right">
            <!-- Link to close login screen -->
            <a class="link login-screen-close">Close</a>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content">
      ...
    </div>
  </div>
  ...
</div>

登录屏幕事件

登录屏幕将在登录屏幕元素和 App 和登录屏幕实例上触发以下 DOM 事件：

DOM 事件

事件Target描述
loginscreen:open登录屏幕元素<div class="login-screen">当登录屏幕开始打开动画时将触发事件
loginscreen:opened登录屏幕元素<div class="login-screen">登录屏幕完成打开动画后触发事件
loginscreen:close登录屏幕元素<div class="login-screen">当登录屏幕开始关闭动画时触发事件
loginscreen:closed登录屏幕元素<div class="login-screen">登录屏幕完成关闭动画后触发事件

App 和登录屏幕实例事件

登录屏幕实例在自身实例和 App 实例上都会发出事件。App 实例事件具有相同名称，并以loginScreen.

事件参数Target描述
open为前缀loginScreenloginScreen当登录屏幕开始其打开动画时，将触发事件。作为参数，事件处理程序接收登录屏幕实例
loginScreenOpenloginScreenapp
openedloginScreenloginScreen当登录屏幕完成其打开动画后，将触发事件。作为参数，事件处理程序接收登录屏幕实例
loginScreenOpenedloginScreenapp
closeloginScreenloginScreen当登录屏幕开始其关闭动画时，将触发事件。作为参数，事件处理程序接收登录屏幕实例
loginScreenCloseloginScreenapp
closedloginScreenloginScreen当登录屏幕完成其关闭动画后，将触发事件。作为参数，事件处理程序接收登录屏幕实例
loginScreenClosedloginScreenapp
beforeDestroyloginScreenloginScreen当登录屏幕实例将被销毁之前，将触发事件。作为参数，事件处理程序接收登录屏幕实例
loginScreenBeforeDestroyloginScreenapp

嵌入式登录屏幕

还可以将登录屏幕嵌入到页面或弹出窗口中。让我们看看页面内登录屏幕的示例：

<div class="page no-navbar no-toolbar no-swipeback login-screen-page">
  <div class="page-content login-screen-content">
    <div class="login-screen-title">My App</div>
    <form>
      <div class="list">
        <ul>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Username</div>
              <div class="item-input">
                <input type="text" name="username" placeholder="Your username" />
              </div>
            </div>
          </li>
          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Password</div>
              <div class="item-input">
                <input type="password" name="password" placeholder="Your password" />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list">
        <ul>
          <li><a href="#" class="list-button">Sign In</a></li>
        </ul>
        <div class="block-footer">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <p><a href="#" class="close-login-screen">Close Login Screen</a></p>
        </div>
      </div>
    </form>
  </div>
</div>

注意，在登录屏幕页面上，我们有额外的 "no-navbar"、"no-toolbar" 和 "no-swipeback" 类来隐藏用户界面元素

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

:root {
  --f7-login-screen-blocks-max-width: 480px;
  --f7-login-screen-title-text-align: center;
  --f7-login-screen-title-text-color: inherit;
  --f7-login-screen-title-letter-spacing: 0;
}
.ios {
  --f7-login-screen-blocks-margin-vertical: 25px;
  --f7-login-screen-transition-timing-function: initial;
  --f7-login-screen-transition-duration: 400ms;
  --f7-login-screen-title-font-weight: 600;
  --f7-login-screen-title-font-size: 28px;
  --f7-login-screen-content-bg-color: #fff;
  --f7-login-screen-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-login-screen-bg-color: #000;
  --f7-login-screen-content-bg-color: #000;
}
.md {
  --f7-login-screen-transition-duration: 600ms;
  --f7-login-screen-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --f7-login-screen-blocks-margin-vertical: 24px;
  --f7-login-screen-title-font-weight: 400;
  --f7-login-screen-title-font-size: 28px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-login-screen-content-bg-color: var(--f7-md-surface);
  --f7-login-screen-bg-color: var(--f7-md-surface);
}

示例

login-screen.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Login Screen</div>
      </div>
    </div>
    <div class="page-content">
      <div class="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>
      </div>
      <!-- example-hidden-start -->
      <div class="list list-strong inset-md list-outline-ios links-list example-hidden">
        <ul>
          <li>
            <a href="/login-screen-page/">As Separate Page</a>
          </li>
        </ul>
      </div>
      <!-- example-hidden-end -->
      <div class="block">
        <a class="button button-raised button-large button-fill login-screen-open" data-login-screen=".login-screen">As
          Overlay</a>
      </div>
    </div>
    <div class="login-screen">
      <div class="page login-screen-page">
        <div class="page-content login-screen-content">
          <div class="login-screen-title">Framework7</div>
          <form>
            <div class="list">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Username</div>
                    <div class="item-input-wrap">
                      <input type="text" name="username" id="demo-username-1" placeholder="Your username" />
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-title item-label">Password</div>
                    <div class="item-input-wrap">
                      <input type="password" name="password" id="demo-password-1" placeholder="Your password" />
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list inset">
              <ul>
                <li><a class="list-button" @click=${signIn}>Sign In</a></li>
              </ul>
              <div class="block-footer">Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.</div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $f7 }) => {
    const signIn = () => {
      var username = $('input#demo-username-1').val();
      var password = $('input#demo-password-1').val();
      $f7.dialog.alert('Username: ' + username + '<br />Password: ' + password, function () {
        $f7.loginScreen.close();
      })
    }

    return $render;
  };
</script>
改进此文档
在本页上