vue+element ui实现带有背景图片的登陆页面
时间: 2023-11-25 10:05:30 浏览: 219
以下是一个使用Vue和Element UI实现带有背景图片的登陆页面的示例代码:
```html
<template>
<div class="login-container">
<div class="background"></div>
<div class="login-form">
<h2 class="title">Welcome to my app</h2>
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px" style="width: 300px;">
<el-form-item label="Username" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Login</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<style scoped>
.login-container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(https://source.unsplash.com/random);
background-size: cover;
filter: blur(5px);
z-index: -1;
}
.login-form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.title {
text-align: center;
margin-bottom: 20px;
}
</style>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
}
},
methods: {
login() {
this.$refs.form.validate(valid => {
if (valid) {
// TODO: perform login action
} else {
console.log('Validation failed')
}
})
}
}
}
</script>
```
该示例代码包括一个名为`login-container`的容器,其中包含一个名为`background`的元素和一个名为`login-form`的登陆表单。`background`元素使用CSS的`background-image`属性设置背景图片,并应用模糊滤镜,以产生一个模糊的背景效果。`login-form`表单使用Element UI的`el-form`和`el-input`组件实现,包括一个用户名输入框、一个密码输入框和一个登陆按钮。登陆按钮的`click`事件绑定到一个`login`方法,该方法使用`$refs`属性获取表单组件引用,并调用`validate`方法进行表单验证。如果验证通过,则执行登陆动作。否则,输出一条验证失败的消息。
阅读全文