2024年4月7日

src/main.js

@@ -19,9 +19,11 @@ import {
   MenuItem,
   Breadcrumb,
   BreadcrumbItem,
-  Avatar
+  Avatar,
+  Message
 } from 'element-ui'
 
+Vue.use(Message)
 Vue.use(Avatar)
 Vue.use(Button)
 Vue.use(Form)

src/views/login.vue

@@ -2,7 +2,7 @@
   <div class="loginbody">
     <div class="logindata">
       <div class="logintext">
-        <h2>Welcome</h2>
+        <h2>{{ create ? '注册' : '登陆' }}</h2>
       </div>
       <div class="formdata">
         <el-form ref="form" :model="form" :rules="rules">
@@ -21,37 +21,46 @@
               show-password
             ></el-input>
           </el-form-item>
+          <el-form-item prop="repassword" v-if="create">
+            <el-input
+              v-model="form.repassword"
+              clearable
+              placeholder="请重复密码"
+              show-password
+            ></el-input>
+          </el-form-item>
         </el-form>
       </div>
       <div class="tool">
         <div>
-          <el-checkbox v-model="checked" @change="remenber"
+          <el-checkbox v-model="checked" @change="remenber" v-if="!create"
             >记住密码</el-checkbox
           >
         </div>
         <div>
-          <span class="shou" @click="forgetpas">忘记密码？</span>
+          <span class="shou" @click="forgetpas" v-if="!create">忘记密码？</span>
         </div>
       </div>
       <div class="butt">
         <el-button type="primary" @click.native.prevent="login"
-          >登录</el-button
+          >{{ create ? '注册' : '登陆' }}</el-button
         >
-        <el-button class="shou" @click="register">注册</el-button>
+        <el-button class="shou" @click="register">{{ create ? '返回' : '注册' }}</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'loGin',
   data () {
     return {
+      create: false,
       form: {
         password: '',
-        username: ''
+        username: '',
+        repassword: ''
       },
       checked: false,
       rules: {
@@ -62,6 +71,10 @@ export default {
         password: [
           { required: true, message: '请输入密码', trigger: 'blur' },
           { max: 10, message: '不能大于10个字符', trigger: 'blur' }
+        ],
+        repassword: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { max: 10, message: '不能大于10个字符', trigger: 'blur' }
         ]
       }
     }
@@ -92,7 +105,9 @@ export default {
       alert('请联系管理员')
     },
     register () {
-      alert('请联系管理员')
+      this.create = !this.create
+      this.$refs.form.clearValidate('username')
+      this.$refs.form.clearValidate('password')
     }
   }
 }