当前位置：首页 > VUE

vue MintUI 实现登录功能

2026-02-20 15:16:01VUE

安装 MintUI

确保项目已初始化并安装 Vue.js。通过 npm 或 yarn 安装 MintUI：

npm install mint-ui --save

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

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

Vue.use(MintUI);

创建登录表单组件

新建 Login.vue 文件，使用 MintUI 的表单组件构建登录界面：

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>

实现登录逻辑

在 Login.vue 的 <script> 部分添加数据绑定和方法：

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      if (!this.username || !this.password) {
        this.$toast('请输入用户名和密码');
        return;
      }

      // 模拟登录请求
      setTimeout(() => {
        this.$indicator.open('登录中...');
        setTimeout(() => {
          this.$indicator.close();
          this.$toast('登录成功');
          // 实际项目中此处跳转到主页
        }, 1500);
      }, 500);
    }
  }
};
</script>

添加样式

在 <style> 中自定义样式：

vue MintUI 实现登录功能

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

路由配置（可选）

若需路由跳转，在 router/index.js 中配置：

import Login from '@/components/Login';

const routes = [
  { path: '/login', component: Login }
];

表单验证增强

结合 vee-validate 进行更严格的验证：

import { ValidationProvider } from 'vee-validate';

export default {
  components: {
    ValidationProvider
  },
  methods: {
    handleLogin() {
      this.$refs.provider.validate().then(valid => {
        if (valid) {
          // 提交逻辑
        }
      });
    }
  }
}