用uniapp写一个登录页面代码
时间: 2023-03-22 13:03:09 浏览: 68
下面是一份 uniapp 写登录页面的代码示例:
```
<template>
<view class="container">
<view class="logo"></view>
<view class="form">
<view class="form-group">
<input type="text" v-model="username" placeholder="请输入用户名" />
</view>
<view class="form-group">
<input type="password" v-model="password" placeholder="请输入密码" />
</view>
<view class="form-group">
<button @click="login">登录</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
if (this.username === '') {
uni.showToast({
title: '请输入用户名',
icon: 'none'
})
return
}
if (this.password === '') {
uni.showToast({
title: '请输入密码',
icon: 'none'
})
return
}
uni.showLoading({
title: '登录中...'
})
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '登录成功',
icon: 'success'
})
uni.navigateBack()
}, 2000)
}
}
}
</script>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #eee;
}
.form {
width: 80%;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 8px #ccc;
border-radius: 10px;
}
.form-group {
margin-bottom: 20px;
}
input {
width: 100%;
height: 40px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
width: 100%;
height: 40px;
padding: 10px;
background-color: #1c9df7;
color: #fff;
border-radius: 5px;
border: none;
}
</style>
```
这份代码实现了一个简单的登录
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)