uview 登录页面代码
时间: 2024-10-13 17:08:38 浏览: 15
UView是基于Vue.js的UI组件库,它提供了一个简洁易用的登录页面示例。以下是使用UView构建一个基础的登录表单的简单代码:
```html
<template>
<div class="login-page">
<u-form ref="loginForm" :model="form" @submit.prevent="handleSubmit">
<u-input v-model="form.username" placeholder="请输入用户名" type="text"></u-input>
<u-input v-model="form.password" placeholder="请输入密码" type="password"></u-input>
<u-button type="primary" block @click="handleSubmit">登录</u-button>
<u-text-help>请输入您的账号信息</u-text-help>
</u-form>
</div>
</template>
<script setup>
import { Form } from 'uview';
import { defineComponent, ref } from 'vue';
const form = ref({
username: '',
password: ''
});
function handleSubmit() {
// 这里只是一个简单的示例,实际应用中需要验证并发送请求
if (form.value.username && form.value.password) {
console.log('提交登录数据', form);
// 提交到后端服务或其他处理逻辑
}
}
</script>
<style scoped>
.login-page {
width: 100%;
max-width: 400px;
margin: auto;
padding: 20px;
box-sizing: border-box;
}
</style>
```
这个例子展示了如何使用UView的`u-form`, `u-input`和`u-button`组件创建登录界面。`v-model`用于双向绑定表单元素的值,`@submit.prevent`阻止了表单的默认提交行为,并通过`handleSubmit`函数处理登录逻辑。
阅读全文