vue密码登录和账号登录页面的设计

1、login.vue文件

（1）在login.vue文件中引入两个组件，分别引用

import LoginAccount from "./cpns/login-account.vue";

import LoginPhone from "./cpns/login-phone.vue";

采用是否点击来显示不同的组件内容

<template>
  <div>
    <div class="login">
      <div class="box">
        <h2>中医系统</h2>
        <div class="login_header">
          <a @click="cur = true" :class="{ active: cur == true }">密码登录</a>

          <a @click="cur = false" :class="{ active: cur == false }">短信登录</a>
          <login-account v-show="cur == true"></login-account>
          <login-phone v-show="cur == false"></login-phone>
          <p class="tips">
            <a href="/register" type="primary" class="right"
              >还没有帐号？立即注册</a
            >
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

 2.设计密码登录页面的组件

（1）采用对象的遍历，vue与element-ui结合起来，：model="form",可以根据下面不同的prop去响应式对应form里面的不同数据

template>
  <div class="loginForm1">
    <el-form
      :model="form"
      status-icon
      :rules="rules"
      ref="form"
      label-width="56px"
      class="demo-ruleForm"
    >
      <el-form-item prop="username">
        <el-icon class="el-icon--right" style="font-size: 20px">
          <user />
        </el-icon>
        <el-input
          v-model="form.username"
          placeholder="账号"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-icon class="el-icon--right" style="font-size: 20px">
          <lock />
        </el-icon>
        <!-- @keyup.enter.native="submitForm"  -->
        <!-- 登陆回车事件 -->
        <el-input
          type="password"
          v-model="form.password"
          placeholder="密码"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm1(form)">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

 

 

 3.设计手机登录页面组件

（1）大概的写法和上面的密码登录是相似的，除了验证码这里需要在后面接上一个获取验证码的按钮，其他的布局大体相似

<template>
  <!-- 在cur==1时此板块显示 其他时候此板块不显示 -->
  <div class="loginForm2">
    <el-form
      :model="phoneform"
      status-icon
      :loginFormRules="loginFormRules"
      ref="phoneform"
      label-width="56px"
      class="demo-ruleForm"
    >
      <el-form-item prop="phone">
        <el-icon class="el-icon--right" style="font-size: 20px">
          <phone />
        </el-icon>
        <el-input
          v-model="phoneform.phone"
          placeholder="手机号码"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="yanzhengma">
        <el-icon class="el-icon--right" style="font-size: 20px">
          <lock />
        </el-icon>
        <!-- @keyup.enter.native="submitForm"  -->
        <!-- 登陆回车事件 -->
        <el-input
          type="yanzhengma"
          v-model="phoneform.yanzhengma"
          placeholder="验证码"
          autocomplete="off"
          class="show-yzm1"
        ></el-input>
        <span class="show-yzm2">
          <el-button
            v-if="phoneform.showloginCode"
            :loading="sending"
            :disabled="sendDisabled"
            size="small"
            @click="getloginPhoneCode"
            >获取验证码</el-button
          >
          <div v-else>{{ phoneform.count }}</div>
        </span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm2">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- </div> -->
</template>

 

 

4.icon的使用

现在新的element-ui使用其中的icon不再像之前那么容易，直接把对应的icon标签写进去即可，我这里采用的是直接引入全部icon组件

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
app.use(ElementPlus);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}