Commit fd2452d6 authored by 杜欣's avatar 杜欣

fix

parent 51e2ed6f
<template>
<div
class="preview-wrap"
@click="preview">
<img :src="silders" >
</div>
</template>
<script>
export default {
props: {
silders: ''
},
methods: {
preview() {
this.$emit('input', false)
}
}
}
</script>
<style lang="less" scoped>
.preview-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<template lang="html">
<div class="upload-image-wrap" ref="uploadImage">
<div
ref="uploadImage"
class="upload-image-wrap">
<div v-if="multiple">
<ul class="upload-image-items" v-if="currImages.length">
<li class="upload-image-item" v-for="(item, inx) in currImages" :disabled="disabled">
<div class="image-inner" v-resize="item"></div>
<div class="image-after" @click.stop="deleteImage(inx)"></div>
</li>
<li class="upload-image-item upload-icon">
<upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
<slot></slot>
</upload-img>
</li>
</ul>
<div class="upload-icon" v-else>
<upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
<slot></slot>
</upload-img>
</div>
<ul
v-if="currImages.length"
class="upload-image-items">
<li
v-for="(item, inx) in currImages"
:disabled="disabled"
class="upload-image-item">
<div
v-resize="item"
class="image-inner"/>
<div class="image-after">
<span @click.stop="deleteImage(inx)"/>
<span @click.stop="lookImage(item)"/>
</div>
</li>
<li class="upload-image-item upload-icon">
<upload-img
class="multiple"
@upload-img="onUpload"
@uploaded="onUploaded"
@error="onUploadError">
<slot/>
</upload-img>
</li>
</ul>
<div
v-else
class="upload-icon">
<upload-img
class="multiple"
@upload-img="onUpload"
@uploaded="onUploaded"
@error="onUploadError">
<slot/>
</upload-img>
</div>
<preview-img
v-if="isflag"
v-model="isflag"
:silders="silders"/>
</div>
<div v-else>
<div class="upload-icon single-upload">
<div class="single-upload-icon" v-resize="currImages">
<span v-if="currImages">修改图片</span>
</div>
<div :class="{ hide: currImages != false }" class="single-upload-body">
<upload-img class="multiple" @upload-img="onSingleUpload" @uploaded="onUploaded" @error="onUploadError">
<slot v-if="currImages == false"></slot>
</upload-img>
</div>
<div class="upload-icon single-upload">
<div
v-resize="currImages"
class="single-upload-icon">
<span v-if="currImages">修改图片</span>
</div>
<div
:class="{ hide: currImages != false }"
class="single-upload-body">
<upload-img
class="multiple"
@upload-img="onSingleUpload"
@uploaded="onUploaded"
@error="onUploadError">
<slot v-if="currImages == false"/>
</upload-img>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// import './webuploader'
import Resize from '@/components/Upload/utils/resizeImage'
import UploadImg from '@/components/Upload/UploadImgBox'
import PreviewImg from '@/components/PreviewImg'
export default {
data () {
return {
inputValue: this.value
}
directives: {
Resize
},
components: {
PreviewImg,
UploadImg
},
props: {
value: {
type: [Array, String]
},
directives: {
Resize
limit: {
type: Number
},
props: {
value: {
type: [Array, String]
},
limit: {
type: Number
},
disabled: Boolean,
multiple: Boolean
disabled: Boolean,
multiple: Boolean
},
data() {
return {
inputValue: this.value,
isflag: false,
silders: ''
}
},
computed: {
currImages() {
if (this.multiple && Array.isArray(this.inputValue)) {
const images = [...this.inputValue]
return images.length ? images : []
} else {
return this.inputValue || ''
}
}
},
watch: {
value(newVal) {
this.inputValue = newVal
}
},
methods: {
// 上传中...
onUpload(res) {
if (!res.data.file_url) return
console.log(this.inputValue)
const content = this.inputValue.length
const limit = Number(this.limit)
if (limit && content >= limit) {
this.$emit('limit', content)
} else {
this.inputValue.push(res.data.file_url)
this.$emit('input', this.inputValue)
}
},
watch: {
value (newVal) {
this.inputValue = newVal
}
onSingleUpload(res) {
if (!res.data.file_url) return
this.inputValue = res.data.file_url
this.$emit('input', res.data.file_url)
},
computed: {
currImages () {
if (this.multiple && Array.isArray(this.inputValue)) {
let images = [...this.inputValue]
return images.length ? images : []
} else {
return this.inputValue || ''
}
}
// 上传完成
onUploaded(res) {
},
methods: {
// 上传中...
onUpload (res) {
if (!res.data.file_url) return
console.log(this.inputValue)
let content = this.inputValue.length
let limit = Number(this.limit)
if (limit && content >= limit) {
this.$emit('limit', content)
} else {
this.inputValue.push(res.data.file_url)
this.$emit('input', this.inputValue)
}
},
onSingleUpload (res) {
if (!res.data.file_url) return
this.inputValue = res.data.file_url
this.$emit('input', res.data.file_url)
},
// 上传完成
onUploaded (res) {
},
onUploadError (error) {
console.log(error)
},
onUploadError(error) {
console.log(error)
},
deleteImage (inx) {
this.inputValue.splice(inx, 1)
this.$emit('input', this.inputValue)
}
deleteImage(inx) {
this.inputValue.splice(inx, 1)
this.$emit('input', this.inputValue)
},
components: {
UploadImg
lookImage(item) {
this.isflag = true
this.silders = item
}
}
}
</script>
......@@ -164,11 +207,42 @@ export default {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translate(-100%, -50%);
width: 18px;
height: 18px;
background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat;
}
&:before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, -50%);
width: 18px;
height: 18px;
background: url('../../assets/image/svg/magnifier.png') no-repeat;
background-size: 18px;
}
span{
&:first-child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-80%, -50%);
width: 30px;
height: 30px;
z-index: 999;
}
&:last-child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(10%, -50%);
width: 30px;
height: 30px;
z-index: 999;
}
}
}
&[disabled]::before {
position: absolute;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment