Project scenario
Registration Using the form in Element-Ul, the Mess message cannot be displayed properly.
Expected effect
Part1
Question 1
Add a Mess message prompt to the button. There is a response, but it is not the expected response. I don’t see the prompt box at the top of the page, but the scroll bar keeps moving up and down.
Later I found out that the prompt boxes appeared below.
<script setup>
import {<!-- --> User, Lock } from '@element-plus/icons-vue'
import {<!-- --> ref } from 'vue'
import {<!-- --> userRegisterService } from '@/api/user.js'
import {<!-- --> ElMessage } from 'element-plus'
const register = async () => {<!-- -->
await form.value.validate()
await userRegisterService(formModel.value)
ElMessage.success('Registration successful')
// alert('Registration successful')
isRegister.value = false
}
const test = () => {<!-- -->
ElMessage.error('Oops, this is an error message.')
console.log('hhhhhhhhh');
}
</script>
<template>
<el-row class="login-page">
<el-col :span="12" class="bg"></el-col>
<el-col :span="6" :offset="3" class="form">
<!-- Registration related forms -->
<el-form
:model="formModel"
:rules="rules"
ref="form"
size="large"
autocomplete="off"
v-if="isRegister"
>
<button @click="test">hhh</button>
<el-form-item>
<h1>Register</h1>
</el-form-item>
Cause analysis 1
Check the official website. Since this project uses automatic import, it has been configured in the file.
But when writing ElMessage.error('Oops, this is a error message.') vscode automatically guides the package
import { ElMessage } from 'element-plus' becomes a manual import.
so
The reason why the code fails may be that the two import methods conflict.
Solution
Delete import { ElMessage } from 'element-plus'
Part 2
Question 2
Add a Mess message prompt to the button, but there is no response, no prompt box, no printing hhhhhh, click to refresh
Solution 2
Method 1
After many attempts, I found that just putting this outside el-form will work.
Method 2
is still in el-form, but uses el-button
All code:
<script setup>
import {<!-- --> User, Lock } from '@element-plus/icons-vue'
import {<!-- --> ref } from 'vue'
const isRegister = ref(true)
const form = ref()
//The entire form data object for submission
const formModel = ref({<!-- -->
username: '',
password: '',
repassword: ''
})
// Validation rules for the entire form
// The top and bottom should have the same name
const rules = ref({<!-- -->
username: [
{<!-- --> required: true, message: 'Please enter username', trigger: 'blur' },
{<!-- --> min: 5, max: 10, message: 'Username must be 5-10 characters', trigger: 'blur' }
],
password: [
{<!-- --> required: true, message: 'Please enter password', trigger: 'blur' },
{<!-- -->
pattern: /^\S{6,15}$/,
message: 'Password must be 6-15 non-blank characters',
trigger: 'blur'
}
],
repassword: [
{<!-- --> required: true, message: 'Please enter password', trigger: 'blur' },
{<!-- -->
pattern: /^\S{6,15}$/,
message: 'Password must be 6-15 non-blank characters',
trigger: 'blur'
},
{<!-- -->
validator: (rules, value, callback) => {<!-- -->
// Determine whether value is consistent with the password currently collected in from
if (value !== formModel.value.password) {<!-- -->
callback(new Error('The passwords entered twice are inconsistent'))
} else {<!-- -->
//Verification successful
// Also write callback
callback()
}
},
trigger: 'blur'
}
]
})
import {<!-- --> userRegisterService } from '@/api/user.js'
// import { ElMessage } from 'element-plus'
const register = async () => {<!-- -->
await form.value.validate()
await userRegisterService(formModel.value)
ElMessage.success('Registration successful')
// alert('Registration successful')
isRegister.value = false
}
const test = () => {<!-- -->
ElMessage.error('Oops, this is an error message.')
console.log('hhhhhhhhh')
// ElMessage({<!-- -->
// showClose: true,
// message: 'Congrats, this is a success message.',
// type: 'success'
// })
}
</script>
<template>
<el-row class="login-page">
<el-col :span="12" class="bg"></el-col>
<el-col :span="6" :offset="3" class="form">
<!-- Registration related forms -->
<!-- <button @click="test">hhh</button> -->
<el-form
:model="formModel"
:rules="rules"
ref="form"
size="large"
autocomplete="off"
v-if="isRegister"
>
<!-- <el-button @click="test">hhh</el-button> -->
<button @click="test">hhh</button>
<el-form-item>
<h1>Register</h1>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="formModel.username"
:prefix-icon="User"
placeholder="Please enter username"
></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
:prefix-icon="Lock"
type="password"
placeholder="Please enter password"
></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input
v-model="formModel.repassword"
:prefix-icon="Lock"
type="password"
placeholder="Please enter password again"
></el-input>
</el-form-item>
<el-form-item>
<el-button
@click="register"
class="button"
type="primary"
auto-insert-space
>
register
</el-button>
</el-form-item>
<el-form-item class="flex">
<el-link type="info" :underline="false" @click="isRegister = false">
← Return
</el-link>
</el-form-item>
</el-form>
<!-- Login related forms -->
<el-form ref="form" size="large" autocomplete="off" v-else>
<el-form-item>
<h1>Login</h1>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="User" placeholder="Please enter username"></el-input>
</el-form-item>
<el-form-item>
<el-input
name="password"
:prefix-icon="Lock"
type="password"
placeholder="Please enter password"
></el-input>
</el-form-item>
<el-form-item class="flex">
<div class="flex">
<el-checkbox>Remember me</el-checkbox>
<el-link type="primary" :underline="false">Forgot your password? </el-link>
</div>
</el-form-item>
<el-form-item>
<el-button class="button" type="primary" auto-insert-space
>Login</el-button
>
</el-form-item>
<el-form-item class="flex">
<el-link type="info" :underline="false" @click="isRegister = true">
Register →
</el-link>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
.login-page {<!-- -->
height: 100vh;
background-color: #fff;
.bg {<!-- -->
background:
url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
url('@/assets/login_bg.jpg') no-repeat center / cover;
border-radius: 0 20px 20px 0;
}
.form {<!-- -->
display: flex;
flex-direction: column;
justify-content: center;
user-select: none;
.title {<!-- -->
margin: 0 auto;
}
.button {<!-- -->
width: 100%;
}
.flex {<!-- -->
width: 100%;
display: flex;
justify-content: space-between;
}
}
}
</style>