1.只需要添加prefix-icon="iconfont icon-xxx"即可（头部插入）
//例如
<el-input
prefix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>
1
2
3
4
5
6
7
2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）
//例如
<el-input
suffix-icon="iconfont icon-sousuo"
v-model="searchTableInfo"
placeholder="请输入姓名"
style="width:240px"
></el-input>
1 图片上传完成之前讲关闭或提交或取消的按钮都置为不可用的状态 ，这样就避免了上面情况的发生；2 关闭d框时取消图片的上传
这里需要引入axios 的 source 的token
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<div class="app-container">
<div class="search-container">
<el-button type="primary" plain @click="handleNew()">新建</el-button>
</div>
<el-dialog
title="新建"
:close-on-click-modal="!dialogVisible"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form ref="newFormModel" :model="newObj" :rules="rules">
<el-form-item class="my-el-form-item" prop="img" label="logo">
<el-upload
ref="fileupload"
class="avatar-uploader"
action
:limit="1"
:disabled="uploadLoading"
:show-file-list="false"
:http-request="getFile"
:on-success="handleAvatarSuccess"
accept=".png, .jpg"
>
<img v-if="newObj.img&&newObj.img.length>0" :src="newObj.img" class="avatar" />
<el-button
:class="newObj.img?'buttonIconC':''"
:disabled="uploadLoading"
size="small"
type="primary"
>点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<!-- 方案一的解决方案 下面相关source 的内容删掉既可-->
<!-- <el-button :disabled="uploadLoading" @click="handleClose()">取 消</el-button>
<el-button type="primary" :disabled="uploadLoading" @click="newSubmit()">确 定</el-button>-->
<!-- 方案二 -->
<el-button @click="handleClose()">取 消</el-button>
<el-button type="primary" @click="newSubmit()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { uplaodImageApi } from '@/api/apiFile'
export default {
data() {
return {
CancelToken: null,
source: null,
dialogVisible: false,
uploadLoading: false,
rules: {
img: [
{ required: true, message: '请选择需要上传的ogo', trigger: 'change' }
]
},
newObj: {
img: ''
}
}
},
watch: {
// 监控当 上传文件过程中突然关闭d框 取消文件的上传 uploadLoading表示是否在上传中
dialogVisible: function(newVal, oldVal) {
if (newVal === false &&oldVal === true &&this.uploadLoading) {
// 取消请求（message 参数是可选的）
this.source.cancel('Image upload cancelled.')
// 取消上传之后做一些初始化工作
this.resetForm()
}
}
},
beforeMount() {
this.CancelToken = this.axios.CancelToken
this.source = this.CancelToken.source()
},
methods: {
handleNew() {
this.dialogVisible = true
},
resetForm() {},
handleClose() {
this.dialogVisible = false
},
newSubmit() {},
uplaodImageFile(img) {
const _self = this
const formData = new FormData()
formData.append('file', img)
this.source = this.CancelToken.source()
uplaodImageApi(formData, this.source.token)
.then(response =>{
this.$message({
message: 'Upload success',
type: 'success'
})
this.newObj.img = response.data.url<br> //上传成功之后 清空表单验证中的部分img内容
this.$refs['newFormModel'].clearValidate('img')
setTimeout(function() {
_self.handleAvatarSuccess()
}, 2000)
})
.catch(msg =>{
if (this.axios.isCancel(msg)) {
// 注意：在此处清空source 因为 不清空会使下次的请求 会被默认取消
this.source = {}
console.log('Request canceled', msg)
} else {
this.$message({
message: msg || 'Upload Error',
type: 'error'
})
this.handleAvatarSuccess()
}
})
},
getFile(value) {
this.uploadLoading = true
const img = value.file
if (this.beforeAvatarUpload(img)) {
this.uplaodImageFile(img)
} else {
this.handleAvatarSuccess()
}
},
handleAvatarSuccess(res, file) {
在el-popover元素上添加 popper-class="（自定义样式类名）"属性，即
<el-popover popper-class="myPopover"></el-popover>，在<style>中，把scoped去掉，然后在样式最前面加上自定义样式。.el-popover.myPopover{自定义样式}。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）