现在很多网站的登录方式都包含账号登录和扫码登录，例如飞书：

今天我教大家使用 Vue3 和 Element 简单复刻一下这个登录页面的交互方式，本教程主要针对前端小白，前端老鸟可以直接略过。

我们看一下这个登录 Demo 的最终演示效果：

其实这个页面的核心知识点有 4 个：

• 1.v-if 控制显示或者隐藏。
• 2.定位：子容器绝对定位，父容器相对定位。
• 3.flex 布局，子元素垂直居中
• 4.transform: rotate（）在3D空间元素围绕 Z 轴进行旋转

1.搭建页面

1.1 登录页面设置

首先使用 el-card 作为登录面板

el-card 里面主要包含4个部分：

• 1.账号密码登录页面
• 2.扫码登录页面
• 3.右上角电脑图标、二维码图标
• 4.白色斜切遮挡部分

登录面板 css 设置：主要是设置为相对定位，左右居中

.login-card {
  margin: 0 auto;
  width: 400px;
  min-width: 400px;
  height: 400px;
  position: relative;
  top: 50px;
}

账号密码登录部分使用 el-form 组件，通过 loginType 变量控制显示隐藏。

扫码登录部分在实际工作中是通过接收后台的图片数据流渲染为二维码，这里以一个二维码图片代替，仅做演示：

登录页面设置为 flex 布局，垂直居中

1.2 右上角图标

右上角的图标可以从阿里巴巴矢量图标库下载

https://www.iconfont.cn/search/index?searchType=icon&q=computer

然后放在 vue 项目中

接着在页面导入：

最后通过 el-image 渲染出来，并使用 el-tooltip 文字提示包裹：

图标的定位是绝对定位，鼠标悬浮更改背景颜色。

1.3 白色遮挡部分

这里我先把遮挡部分改成红色：

大家发现原来遮挡部分其实就是一个背景颜色为白色的 div，然后旋转了 45 度。

这里主要使用 transform: rotate() 对元素进行旋转。

.white-cover {
  width: 70.71px;
  height: 70.71px;
  position: absolute;
  background-color: white;
  top: 15px;
  right: 15px;
  transform: rotate(45deg);
}

2. 切换登录方式

其实就是给图标模块绑定点击事件，然后修改登录类型的布尔值：

const loginType = ref(false);
const changeLoginType = () => {
  loginType.value = !loginType.value;
};

3. 完整代码

读完我的文章，你会发现我讲的很细很细。大部分博主都是直接甩给你一段代码，但我真的是手把手一点一点教会你，我觉得真诚是永远的必杀技。

希望大家多多分享，多多点赞，爱你们！你们永远是我写作路上最强大的力量！

  <template>
  <div>
    <!-- 作者：知否技术 -->
    <el-card class="login-card">
      <!-- 账号密码登录 -->
      <div class="account-login" v-if="loginType">
        <h1>知否后台系统</h1>
        <el-form :model="loginForm" style="z-index: 3" label-width="80px">
          <el-form-item label="账号:">
            <el-input v-model="loginForm.username" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码:">
            <el-input v-model="loginForm.password" placeholder="请输入密码" />
          </el-form-item>
        </el-form>
      </div>
      <!-- 二维码登录 -->
      <div class="qrcode-login" v-if="!loginType">
        <div style="text-align: center">
          <p style="font-size: 25px; font-weight: bold">扫码登录</p>
          <p>请使用知否移动端扫描二维码</p>
        </div>
        <el-image :src="qrcode" style="width: 200px; height: 200px" :fit="fit" />
      </div>
      <!-- 右上角图标 -->
      <div class="login-icon" @click="changeLoginType">
        <el-tooltip
          class="custom-tooltip"
          :content="loginType ? '扫码登录' : '账号登录'"
          placement="left-start"
        >
          <el-image
            v-if="!loginType"
            :src="computerIcon"
            style="width: 30px; height: 30px; margin: 5px 2px 5px 18px"
            :fit="fit"
          />

          <el-image
            v-if="loginType"
            :src="qrcodeIcon"
            style="width: 30px; height: 30px; margin: 5px 2px 5px 18px"
            :fit="fit"
          />
        </el-tooltip>
      </div>
      <!-- 白色遮挡 -->
      <div class="white-cover"></div>
      <!-- 公众号：知否技术 -->
    </el-card>
  </div>
</template>

<script setup>
// 公众号：知否技术
import { ref, reactive } from "vue";
import computerIcon from "../assets/img/computer.png";
import qrcodeIcon from "../assets/img/qrcode.png";
import qrcode from "../assets/img/zhifou.png";
const loginForm = reactive({
  username: "",
  password: "",
});
const loginType = ref(false);
const changeLoginType = () => {
  loginType.value = !loginType.value;
};
</script>

<style lang="scss" scoped>
.login-card {
  margin: 0 auto;
  width: 400px;
  min-width: 400px;
  height: 400px;
  position: relative;
  top: 50px;
}
.account-login,
.qrcode-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.account-login {
  margin-top: 40px;
}

.login-icon {
  position: absolute;
  top: 0;
  right: 0;
  background: #82a7fc;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.login-icon:hover {
  background: #4e83fd;
}
.white-cover {
  width: 70.71px;
  height: 70.71px;
  position: absolute;
  background-color: white;
  top: 15px;
  right: 15px;
  transform: rotate(45deg);
}
</style>