element-ui的安裝
第一步：命令窗口中在項(xiàng)目地址下：
輸入npm i element-ui -S 安裝elementui 依賴(lài)
第二步:完整引入
在 main.js 中寫(xiě)入以下內(nèi)容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步:按需引入組件
from表單的登錄頁(yè)面
el-form 組件? ? :model="ruleForm" ruleForm是data中定義的存儲(chǔ)的是用戶(hù)名和密碼值的對(duì)象 通過(guò)model傳給el-form組件?
:rules="rules" rules是data中定義的對(duì)象,目的是校驗(yàn)用戶(hù)名和密碼的規(guī)則
-- ref="ruleForm" 咱們可以通過(guò)ref來(lái)獲取el-form組件內(nèi)部的方法 比如：validate校驗(yàn)方法 resetFields重置方法
status-icon 是在表單校驗(yàn)錯(cuò)誤的時(shí)候 輸入框中出現(xiàn)的提示小圖標(biāo)
--label-width="200px" 是用來(lái)控制用戶(hù)名和密碼文本的寬度
<template>?
<div class="myform">? ?
<h1>用戶(hù)登錄</h1>? ?
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" >?
<!-- label 控制輸入框的文本 ?prop="username" 是對(duì)應(yīng)表單域model中的username字段? ? ? ? ? ? 規(guī)則的名字需要和表單域model中的字段一模一樣 -->?
<el-form-item label="用戶(hù)名" prop="username">?
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>?
<el-form-item label="密碼" prop="password">?
<!-- autocomplete="off"作用是把輸入框的自動(dòng)提示功能關(guān)閉 -->
<el-input type="password" v-model="ruleForm.password" autocomplete="off" ></el-input>?
</el-form-item>
<el-form-item>? <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>?
</el-form-item>?
</el-form>? </div></template>
<script>
export default {
? name: "LoginView",
? data() {
? ? var checkUser = (rule, value, callback) => {
? ? ? console.log("用戶(hù)名:", value);
? ? ? if (value.trim() == "") {
? ? ? ? callback(new Error("請(qǐng)輸入用戶(hù)名"));
? ? ? } else if (!/^[\w\u4e00-\u9fa5]{5,10}$/.test(value)) {
? ? ? ? callback(new Error("用戶(hù)名為5-10位中英文數(shù)字或者下劃線(xiàn)"));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? };
? ? var validatePass = (rule, value, callback) => {
? ? ? console.log("密碼：", value);
? ? ? if (value.trim() == "") {
? ? ? ? callback(new Error("請(qǐng)輸入密碼"));
? ? ? } else {
? ? ? ? callback();
? ? ? }
? ? };
? ? return {
? ? ? ruleForm: {
? ? ? ? password: "",
? ? ? ? username: "",
? ? ? },
? ? ? rules: {
? ? ? ? password: [{ validator: validatePass, trigger: "blur" }],
? ? ? ? username: [{ validator: checkUser, trigger: "blur" }],
? ? ? },
? ? };
? },
? methods: {
? ? submitForm(formName) {
? ? ? this.$refs[formName].validate((valid) => {
el-form組件的validate方法 在回調(diào)函數(shù)中昙沦，如果vaild為true能岩，則表示表單驗(yàn)證通過(guò)，為false則不通過(guò)
? ? ? ? if (valid) {
? ? ? ? ? alert("submit!");
? ? ? ? } else {
? ? ? ? ? console.log("error submit!!");
? ? ? ? ? return false;
? ? ? ? }
? ? ? });
? ? },
? ? resetForm(formName) {
? ? ? this.$refs[formName].resetFields();
? ? },
? },
};
</script>
