当前位置：首页 > VUE

vue MintUI 实现登录功能

2026-01-19 23:11:04VUE

安装 MintUI

确保项目已安装 Vue.js，通过 npm 或 yarn 安装 MintUI：

npm install mint-ui -S

引入 MintUI

在 main.js 中全局引入 MintUI 并注册：

import Vue from 'vue';
import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

创建登录表单组件

在 Vue 组件中使用 MintUI 的表单组件（如 mt-field 和 mt-button）构建登录界面：

vue MintUI 实现登录功能

<template>
  <div class="login-container">
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-button type="primary" size="large" @click="handleLogin">登录</mt-button>
  </div>
</template>

处理登录逻辑

在组件的 script 部分实现登录逻辑，包括数据绑定和方法：

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      if (!this.username || !this.password) {
        this.$toast('请输入用户名和密码');
        return;
      }
      // 模拟登录请求
      setTimeout(() => {
        this.$toast('登录成功');
        this.$router.push('/home'); // 跳转到首页
      }, 1000);
    }
  }
};
</script>

样式调整

根据需要添加样式以优化布局：

vue MintUI 实现登录功能

<style scoped>
.login-container {
  padding: 15px;
}
.mt-button {
  margin-top: 20px;
}
</style>

表单验证（可选）

使用 MintUI 的 mt-field 内置验证或自定义验证规则：

<mt-field 
  label="用户名" 
  placeholder="请输入用户名" 
  v-model="username"
  :attr="{ maxlength: 10 }"
  @blur.native.capture="validateUsername">
</mt-field>

methods: {
  validateUsername() {
    if (this.username.length < 3) {
      this.$toast('用户名至少3位');
    }
  }
}

网络请求封装

结合 Axios 处理实际登录请求：

import axios from 'axios';

handleLogin() {
  axios.post('/api/login', {
    username: this.username,
    password: this.password
  }).then(response => {
    if (response.data.success) {
      this.$router.push('/dashboard');
    }
  }).catch(error => {
    this.$toast(error.response.data.message);
  });
}