Vue的PC端开发使用Element之初

1 创建项目

        $ vue create xxxx

2 安装elelemgt

        $ npm i element-ui

3 注册

        import ElementUI from 'element-ui';

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

        Vue.use(ElementUI);

根据官网的信息做一个简单的登录页面

找到卡片组件 截取自己需要的信息 -多余的删除

Card 卡片

<el-card class='login-card'>xxxx </el-card>

Form 表单

因需要带有验证的效果所以 使用

表单验证

根据需要  保留自己想要的 并且更改

<el-card class="login-card">       
    <el-form style="margin-top: 50px">
        <el-form-item>
            <el-input placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%">登录</el-button>
    </el-form-item>
</el-card>

css的样式简单的修改一下 

body {
    margin: 0;
}
#app {
    width: 100%;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-card {
    width: 440px;
    height: 300px;
}

根据需求  进行表单的校验  和自定义的校验

在校验之前  要有先决的条件

el_form=>  绑定的model属性/rules规则

el-form-item =>设置prop属性

el-input=>v-model绑定属性

建立model熟悉  也就是表单的数据对象

  data () {
    // 定义表单数据对象
    return {
      loginForm: {
        mobile: '',
        password: ''
      }
    }
  }

再去绑定model

 <el-form :model="loginForm" >

绑定rules规则

 rules: {
       mobile: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]}

设置prop

<el-form-item prop="mobile">
   
<el-form-item prop="password">

绑定input字段属性

 <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
//密码框以此类推

根据需求添加自己的自定义规则

rules: {
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
        {
            trigger: 'blur',
            validator: validateMoble,
        },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur' },
    ],
},

完整的代码

<template>
    <div id="app">
        <!-- 卡片组件 -->
        <el-card class="login-card">
            <!-- 登录表单 -->
            <el-form :model="ruleForm" :rules="rules" ref="text" style="margin-top: 50px">
                <el-form-item prop="mobile">
                    <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="submitForm('text')">登录</el-button>
                </el-form-item>
                <el-button @click="resetForm('text')">重置</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'App',
    components: {},
    data() {
        var validateMoble = (rule, value, callback) => {
            value.charAt(2) === '8' ? callback() : callback(new Error('第三位手机号必须是8'))
        }
        return {
            ruleForm: {
                mobile: '',
                password: '',
            },
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
                    {
                        trigger: 'blur',
                        validator: validateMoble,
                    },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
    },
}
</script>

<style>
body {
    margin: 0;
}
#app {
    width: 100%;
    height: 100vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-card {
    width: 440px;
    height: 300px;
}
</style>