vue+element-ui小笔记

1.图片加载失败，给默认图，两种解决方法：

方法一：

给img标签加 onerror指令，然后在data中给 errorGoodsImg 赋值，根据自己所需图片路径赋值

<img :src="imgSrc+scope.row.fileId" id="avatarImg" v-if="scope.row.fileId" :onerror="errorGoodsImg">

小颖的目录：

data中，errorGoodsImg的值如下：

errorGoodsImg: 'this.src="' + require('../assets/images/new.jpg') + '"',

方法二：

调用 element-ui 中的 <el-image> 标签，可通过slot = error可自定义加载失败内容

eg:

<el-image v-if="userInfo.credentialsFileId" style=" 75px; height: 115px" :src="imgSrc+userInfo.credentialsFileId" :preview-src-list="srcList">
     <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
     </div>
</el-image>

2.form表单中，输入框加回车事件，页面刷新，如何解决？

解决方法就是在form中添加：@submit.native.prevent

示例：

html代码：

<template>
    <div class="ceshi-form-tem right-content-tem">
        <el-form ref="form" :model="userInfo" label-width="100px" class="userInfo-form" @submit.native.prevent>
            <el-row>
                <el-col :span="12">
                    <p class="form-title-tem">基本信息</p>
                </el-col>
                <el-col :span="12" class="txt-right">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')" :loading="btnUserLoading">
                            保存
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="头像">
                <el-upload
                        style=" 30%"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        accept=".jpg,.png"
                        :on-remove="handleRemoveAvatar"
                        :beforeUpload="beforeAvatarUpload"
                        :on-error="onError"
                        :on-success="onSuccess"
                        :limit="1">
                    <img v-if="userInfo.avatar" :src="userInfo.avatar" :onerror="errorGoodsImg"
                         class="userInfo-avatar">
                    <img v-else src="../assets/img/tu4.png" class="userInfo-avatar">
                </el-upload>
            </el-form-item>
            <el-form-item
                    label="昵称"
                    prop="nickname">
                <p v-if="!userInfoEdit.nickname">{{userInfo.nickname}}
                    <i class="el-icon-edit" @click="showInput('nickname')"></i>
                </p>
                <el-input ref="customerInput" v-else maxlength="6" placeholder="请输入昵称" v-model="userInfo.nickname"
                          @keyup.enter.native="handleInputConfirm('nickname')"
                          @blur="handleInputConfirm('nickname')"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <p>{{userInfo.username}}</p>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="userInfo.sex" @change="changeSex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <!--普通用户-->
            <el-form-item label="所属机构">
                <p v-if="!userInfoEdit.organizationName">{{userInfo.organizationName}}<i class="el-icon-edit" @click="showInput('organizationName')"></i></p>
                <el-input ref="customerInput" v-if="userInfoEdit.organizationName" maxlength="6" placeholder="请输入所属机构"
                          v-model="userInfo.organizationName"
                          @keyup.enter.native="handleInputConfirm('organizationName')"
                          @blur="handleInputConfirm('organizationName')"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

js代码：

<script>
    export default {
        name: "formCeshi",
        data(){
            return {
                btnUserLoading: false,
                errorGoodsImg: 'this.src="' + require('../assets/img/tu4.png') + '"',
                userInfo: {
                    avatar: '',
                    nickname: 'v',
                    username: '测试',
                    sex: 1,
                    organizationName: '杀杀杀'
                },
                userInfoEdit: {
                    nickname: false,
                    organizationName: false
                },
                haveChange: false
            }
        },
        mounted() {
            this.haveChange = false
        },
        methods: {
            onSubmit(formName) {
                const that = this
                if (!that.haveChange) {
                    that.$message({
                        message: '当前没有任何修改',
                        type: 'warning'
                    });
                    return
                }
                that.btnUserLoading = true
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.btnUserLoading = false
                    //    调接口
                    } else {
                        that.btnUserLoading = false
                        return false;
                    }
                });
            },
            showInput(key) {
                switch (key) {
                    case'nickname':
                        this.userInfoEdit.nickname = true;
                        break
                    case'organizationName':
                        this.userInfoEdit.organizationName = true;
                        break
                }
                this.$nextTick(function () {
                    this.$refs.customerInput.$el.querySelector('input').focus();
                });
            },
            handleInputConfirm(key) {
                this.haveChange = true
                switch (key) {
                    case'nickname':
                        this.userInfoEdit.nickname = false;
                        break
                    case'organizationName':
                        this.userInfoEdit.organizationName = false;
                        break
                }
            },
            handleRemoveAvatar(file, fileList) {
                this.userInfo.avatar = ''
            },
            beforeAvatarUpload(file) {
                let fileend = file.name.substring(file.name.lastIndexOf("."))
                //jpg、png、bmp
                const isZip = (fileend === '.jpg' || file.type === 'jpg') || (fileend === '.png' || file.type === 'png')
                if (!isZip) {
                    this.$message.error('您只能上传jpg、png格式的图片!')
                }
                const isLt2G = file.size / 1024 / 1024 < 1;
                if (!isLt2G) {
                    this.$message.error('上传的图片大小必须小于1MB!')
                }
                return isZip && isLt2G
            },
            onSuccess(file, res, fileList) {
                if (res.response.code != 200) {
                    this.$message.error('上传头像失败');
                } else {
                    this.haveChange = true
                    this.userInfo.avatar = URL.createObjectURL(file.raw);
                }
            },
            onError(err, file, fileList) {
                const errMsg = JSON.parse(err.message)
                this.$message.error(errMsg.msg ? errMsg.msg : '上传头像失败');
            },//修改性别
            changeSex() {
                this.haveChange = true
            }
        }
    }
</script>

css

<style scoped>
    form.userInfo-form {
        width: 400px;
        margin: 40px auto 0 auto;
    }
    img.userInfo-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }
</style>

3.使用在线主题生成工具，修改element自定义主题色

打开在线主题编辑器，在该页面中根据自己的需求，更改颜色，修改完后，下载主题包，然后在项目中引入就可以了。

持续更新.......................................

秀两张我家仔仔的盛世美颜：