Vue项目中使用ElementUI

最新推荐文章于 2024-02-10 04:47:23 发布

原创最新推荐文章于 2024-02-10 04:47:23 发布 · 231 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

SpringBoot 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并引入ElementUI库，包括在main.js中导入和注册组件，以及使用Form组件进行表单验证。示例代码展示了登录表单的创建，包含样式设置、校验规则以及点击事件处理。同时，讲解了如何引入自定义样式文件，并提供了登录界面的实现效果。

ElementUI 安装

npm i element-ui -S

引入 Element

main.js 内容添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

以上代码便完成了 Element 的引入。样式文件需要单独引入。各个组件的使用方法请参阅它们各自的文档。

使用 Form 组件

元素标签

<el-form class="loginForm" label-position="left"
             label-width="0px" :model="loginForm"
             :rules="loginFormRules"
             ref="loginFormRef">
        <h3 class="loginTitle">系统登录</h3>
        <el-form-item prop="username">
            <el-input prefix-icon="fas fa-user" type="text" v-model="loginForm.username"
                      auto-complete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input prefix-icon="fas fa-lock" type="password" v-model="loginForm.password"
                      auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;background: #505458;border: none"
                       v-on:click="login">登录</el-button>
        </el-form-item>
    </el-form>

表单验证

// 用户登录
login() {
  // 登录前校验
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return
    // todo 校验通过
    this.$message.success('执行登录操作')
  })
}

// 表单校验规则,trigger指定什么时候触发校验
loginFormRules: {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    {
      min: 4,
      max: 20,
      message: '账号长度在 4 到 20 个字符',
      trigger: 'blur'
    }
  ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      {
        min: 6,
        max: 15,
        message: '密码长度在 6 到 15 个字符',
        trigger: 'blur'
      }
    ]
},

使用样式css

在public 文件增加 css/login.css ，内容如下：

.loginForm {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

 <style>
    @import "../assets/css/login.css";
</style>

测试

界面展示效果：

在这里插入图片描述

参考

https://element.eleme.cn/#/zh-CN/component/installation