program a login page with vue ,ts , element ui
时间: 2024-03-01 09:55:14 浏览: 16
Sure, here's an example of a login page using Vue, TypeScript, and Element UI:
```html
<template>
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="Username" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">Login</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-ui';
@Component({
components: {
ElForm,
ElFormItem,
ElInput,
ElButton,
},
})
export default class Login extends Vue {
private loginForm = {
username: '',
password: '',
};
private login() {
this.$refs.loginForm.validate((valid: boolean) => {
if (valid) {
// perform login action
} else {
console.log('Login form validation failed.');
return false;
}
});
}
}
</script>
```
In this example, we use the `ElForm`, `ElFormItem`, `ElInput`, and `ElButton` components from Element UI to create a form with two fields for the username and password. We then use the `validate` method to check if the form is valid before performing the login action.
Note that you'll need to import Element UI and register its components in your Vue app before using them in your components. You'll also need to install the necessary dependencies (Vue, TypeScript, Element UI) in your project.