項目中使用ElementUI的Form 組件

使用ElementUI的Form 組件

（1）首先必須是項目中安裝ElementUI庫 （2）引入Vue的項目中 （3）引入對應的組件名稱並且全局註冊

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);

使用 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;
}  
 

Login.vue 引入 login.css。

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

界面展示效果：