赞助商成为赞助商

登录屏幕

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.loginScreen.create(parameters)- 创建登录屏幕实例

  • parameters - object。具有登录屏幕参数的对象

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

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

  • el - HTMLElement 或 string (带 CSS 选择器) 或 object。要销毁的登录屏幕元素或登录屏幕实例。

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

  • el - HTMLElement 或 string (带 CSS 选择器)。登录屏幕元素。

方法返回登录屏幕实例

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

  • el - HTMLElement 或 string (带 CSS 选择器)。要打开的登录屏幕元素。
  • animate - boolean。使用动画打开登录屏幕。

方法返回登录屏幕实例

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

  • el - HTMLElement 或 string (带 CSS 选择器)。要关闭的登录屏幕元素。
  • animate - boolean。使用动画关闭登录屏幕。

方法返回登录屏幕实例

登录屏幕参数

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

参数类型默认值说明
elHTMLElement
string		登录屏幕元素。如果您在 HTML 中已经有登录屏幕元素并且希望使用该元素创建新实例时，此元素会很有用
contentstring完整的登录屏幕 HTML 布局字符串。如果您想动态地创建登录屏幕元素时，此字符串会很有用
animatebooleantrue登录屏幕是否应使用动画打开/关闭。可以在 .open() 和 .close() 方法中覆盖此参数
containerElHTMLElement
string		要安装模态的元素（默认为应用程序根元素）
onobject

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

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 - boolean（默认情况下为 true） - 定义是否应使用动画将其打开
loginScreen.close(animate)关闭登录屏幕。其中
  • animate - boolean（默认情况下为 true） - 定义是否应使用动画将其关闭
loginScreen.destroy()销毁登录屏幕
loginScreen.on(event, handler)添加事件处理程序
loginScreen.once(event, handler)添加事件处理程序，该处理程序将在触发后被移除
loginScreen.off(event, handler)移除事件处理程序
loginScreen.off(event)移除指定事件的所有处理程序
loginScreen.emit(event, ...args)在实例上触发事件

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

  • 要打开登录屏幕，我们需要将“login-screen-open”类添加到任何 HTML 元素（最好是链接）

  • 要关闭登录屏幕，我们需要将“login-screen-close”类添加到任何 HTML 元素（最好是链接）

  • 如果 DOM 中有多个登录屏幕，则需要通过此 HTML 元素上的其他 data-login-screen=".my-login-screen" 属性指定适当的登录屏幕

根据上述说明

<!-- 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>

登录屏幕事件

登录屏幕将在登录屏幕元素以及应用程序和登录屏幕实例上触发以下 DOM 事件

DOM 事件

事件目标说明
loginscreen:open登录屏幕元素 <div class="login-screen">当登录屏幕开始其打开动画时，将触发此事件
loginscreen:opened登录屏幕元素 <div class="login-screen">当登录屏幕完成其打开动画后，将触发此事件
loginscreen:close登录屏幕元素 <div class="login-screen">当登录屏幕开始其关闭动画时，将触发此事件
loginscreen:closed登录屏幕元素 <div class="login-screen">当登录屏幕完成其关闭动画后，将触发此事件

应用程序和登录屏幕实例事件

登录屏幕实例在自身实例和应用程序实例上发出事件。应用程序实例事件具有相同名称，前缀为 loginScreen。

事件参数目标说明
openloginScreenloginScreen当登录屏幕开始其打开动画时，将触发此事件。作为参数，事件处理程序接收登录屏幕实例
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>
改善此文档
本页内容