|
@@ -8,24 +8,20 @@
|
|
|
<el-input v-model="ruleForm.enName" placeholder="请输入"/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="品牌LOGO:">
|
|
|
- <div style="display:inline-block;">
|
|
|
+ <div class="logo">
|
|
|
<el-upload
|
|
|
+ style="flex: 1"
|
|
|
+ class="avatar-uploader"
|
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- list-type="picture-card"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :limit="1"
|
|
|
- accept=".jpg, .png, .jpeg"
|
|
|
- >
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload">
|
|
|
+ <img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
</el-upload>
|
|
|
-<!-- <span>支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>-->
|
|
|
-
|
|
|
+ <span class="imgTip">支持格式GIF、JPG、JPEG、PNG,文件80K以内,建议尺寸80PX*80PX</span>
|
|
|
</div>
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
- </el-dialog>
|
|
|
+
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-dialog
|
|
@@ -75,12 +71,8 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleRemove(file, fileList) {
|
|
|
- console.log(file, fileList);
|
|
|
- },
|
|
|
- handlePictureCardPreview(file) {
|
|
|
- this.dialogImageUrl = file.url;
|
|
|
- this.dialogVisible = true;
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
},
|
|
|
beforeAvatarUpload(file) {
|
|
|
const isJPG = file.type === 'image/jpeg';
|
|
@@ -103,9 +95,20 @@
|
|
|
/deep/ .el-dialog__header {
|
|
|
border-bottom: 1px solid #E4E5E7;
|
|
|
}
|
|
|
-.reset-form{
|
|
|
+.reset-form {
|
|
|
width: 320px;
|
|
|
margin: 0 auto;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ .imgTip{
|
|
|
+ font-size: 12px;
|
|
|
+ color:#C3C7CB;
|
|
|
+ line-height:18px;
|
|
|
+ margin-left: 8px;
|
|
|
+ margin-bottom: 78px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -129,3 +132,31 @@
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style>
|
|
|
+ .avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 112px;
|
|
|
+ height: 112px;
|
|
|
+ line-height: 112px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 112px;
|
|
|
+ height: 112px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+</style>
|