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自定义主题色
打开在线主题编辑器,在该页面中根据自己的需求,更改颜色,修改完后,下载主题包,然后在项目中引入就可以了。
持续更新.......................................
秀两张我家仔仔的盛世美颜: