发布于 

脱离脚手架使用vue+elementUI

替换主题色

使用element官方提供的在线主题生成工具，将下载的压缩包解压缩并在页面中引入index.css

1
2
3
4
<!--将解压缩得到的全部样式放到eleui目录下-->
<link rel="stylesheet" href="./css/eleui/index.css">
<script src="./js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

使用表单验证并阻止默认提交

场景如下：

我想让登录表单的账号和密码进行验证操作，验证通过再进行表单提交。

因为el-form为一个封装好的组件，在el-form中使用@submit只能监听封装好的组件事件，要想在组件中监听表单提交原生事件需要加上.native才行(如：@submit.native)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
        <div class="login-box">
            <h2>论坛后台-登录</h2>
            <el-form ref="form" label-width="80px" :rules="rules" :model="form" action="http://localhost/print01.php"
                @submit.native="checkForm('form',$event)" method="post">

                <el-form-item label="账号:" prop="account">
                    <el-input placeholder="请输入账号" v-model="form.account" name="account"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="passwd">
                    <el-input placeholder="请输入密码" v-model="form.passwd" name="passwd" show-password></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" native-type="submit">立即登录</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    account: '',
                    passwd: ''
                },
                rules: {
                    account: [
                        { required: true, message: '账号不能为空', trigger: 'blur' },
                        { min: 3, max: 13, message: '长度在3到13个字符', trigger: 'blur' }
                    ],
                    passwd: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            
            checkForm(formName, e) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('prevent submit!!');
                        e.preventDefault()
                        
                    }
                });
                



            }
        }
    })

显示上传的图片(使用base64)

场景如下：

在上传图片的时候，可以看到上传的图片。

1
2
3
4
5
6
7
8
<div>
       <input id="file" ref="file" type="file" @change="showImg">
</div>
<el-image style="width: 100px; height: 100px" :src="imgUrl" fit="fit">
    <div slot="error" class="image-slot" >
        <i class="el-icon-picture-outline" ></i>
    </div>
</el-image>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
data(){
    return {
        imgUrl:""
    }
},
methods:{
    showImg(){
        //这里之所以使用ref去获取图片，是因为我使用event不能获取到files
                let fileData = this.$refs.file.files[0]
                let type = fileData.type
                if(this.isImg(type)){
                    let flag = this.calcImgSize(fileData.size);
                    if(flag){
                        this.base64(fileData)
                    }else{
                        alert('图片大小不能超过2M')
                    }
                }
                
            },
            //判断是否为图片
            isImg(type){
                let pattern = /^image/;
                if(!pattern.test(type)){
                    alert('图片格式不对');
                    return false
                }
                return true
            },
            //计算图片大小，不能超过2M
            calcImgSize(size){
                let num = size/1024/1024;
                // console.log(num)
                if(num<2){
                    return true
                }
                return false
            },
            //将图片转码
            base64(fileData){
                const that = this
                let reader = new FileReader();
                reader.readAsDataURL(fileData);
                reader.onload = function(e){
                // console.log(e);
                // console.log(this.result);
                that.imgUrl = this.result
                // image.setAttribute("src",this.result)
            }
        }
        
}

自定义表单验证规则

场景如下：

在修改密码时，需要输入旧密码，新密码，再次确认新密码，新旧密码不能一样，验证通过才提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                        class="demo-ruleForm" action="http://localhost/print01.php"
                        @submit.native="checkForm('ruleForm',$event)" method="post">
    
                            <el-form-item label="旧密码" prop="oldPass">
                                <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off" show-password name="oldPass"></el-input>
                            </el-form-item>
    
                            <el-form-item label="新密码" prop="pass">
                                <el-input type="password" v-model="ruleForm.pass" autocomplete="off" show-password name="newPass"></el-input>
                            </el-form-item>
    
                            <el-form-item label="确认新密码" prop="checkPass">
                                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" name="checkPass"></el-input>
                            </el-form-item>
                            
                            <el-form-item>
                                <el-button type="primary" native-type="submit">确认修改</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
data(){
                //自定义校验规则
             var validateOldPass = (rule,value,callback) => {
                if(value === ''){
                    callback(new Error('旧密码不能为空!'))
                }else{
                    callback()
                }
            };

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                }else if(value === this.ruleForm.oldPass){
                    callback(new Error('新旧密码不能一样!'))
                }
                 else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入新密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            
                return { 
                    ruleForm: {
                        oldPass:'',
                        pass: '',
                        checkPass: '',

                    },
                    rules: {
                        oldPass: [
                            { validator: validateOldPass, trigger: 'blur' }
                        ],
                        pass: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        checkPass: [
                            { validator: validatePass2, trigger: 'blur' }
                        ],

                    }

            };
},
    methods: {
        checkForm(formName,e) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    e.preventDefault()
                }
            });
        },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
    }
许可协议

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。