You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.3 KiB
100 lines
2.3 KiB
2 years ago
|
<template>
|
||
|
|
<div class="curren-upload">
|
||
|
|
<el-upload
|
||
|
|
action="#"
|
||
|
|
list-type="picture-card"
|
||
|
|
:auto-upload="false"
|
||
|
|
:multiple="multiple"
|
||
|
|
:limit="limit"
|
||
|
|
:accept="picExt"
|
||
|
|
:file-list="searchData"
|
||
|
|
:on-exceed="handleExceed"
|
||
|
|
:on-remove="handleRemove"
|
||
|
|
:on-preview="handlePictureCardPreview"
|
||
|
|
:on-change="changeUpload"
|
||
|
|
>
|
||
|
|
<i slot="default" class="el-icon-plus"></i>
|
||
|
|
<!-- <div slot="file" slot-scope="{file}">
|
||
|
|
<img
|
||
|
|
class="el-upload-list__item-thumbnail"
|
||
|
|
:src="file.url" alt=""
|
||
|
|
>
|
||
|
|
<span class="el-upload-list__item-actions">
|
||
|
|
<span
|
||
|
|
class="el-upload-list__item-preview"
|
||
|
|
@click="handlePictureCardPreview(file)"
|
||
|
|
>
|
||
|
|
<i class="el-icon-zoom-in"></i>
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
v-if="!disabled"
|
||
|
|
class="el-upload-list__item-delete"
|
||
|
|
@click="handleRemove(file)"
|
||
|
|
>
|
||
|
|
<i class="el-icon-delete"></i>
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
</div> -->
|
||
|
|
</el-upload>
|
||
|
|
<el-dialog
|
||
|
|
:visible.sync="dialogVisible"
|
||
|
|
top="1vh"
|
||
|
|
width="35%"
|
||
|
|
:modal-append-to-body="false"
|
||
|
|
:append-to-body="true"
|
||
|
|
:show-close="true"
|
||
|
|
>
|
||
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "currenUploadPictureCard",
|
||
|
|
props: {
|
||
|
|
limit: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
multiple:{
|
||
|
|
type: Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
searchData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
picExt: {
|
||
|
|
type: String,
|
||
|
|
default: "",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
dialogImageUrl: '',
|
||
|
|
dialogVisible: false,
|
||
|
|
disabled: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handlePictureCardPreview(file) {
|
||
|
|
this.dialogImageUrl = file.url;
|
||
|
|
this.dialogVisible = true;
|
||
|
|
},
|
||
|
|
// handleDownload(file) {
|
||
|
|
// console.log(file);
|
||
|
|
// },
|
||
|
|
changeUpload (val) {
|
||
|
|
this.$emit('changeUpload', val)
|
||
|
|
},
|
||
|
|
handleRemove (file, fileList) {
|
||
|
|
this.$emit('handleRemove', fileList)
|
||
|
|
},
|
||
|
|
handleExceed (val) {
|
||
|
|
this.$warningMsg('最多上传' + this.limit + '个文件')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|