Skip to content

S
sun
Commit fd2452d6 authored by 杜欣's avatar 杜欣
Browse files
Options

fix

parent 51e2ed6f
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 87 deletions
vu/src/components/PreviewImg/index.vue 0 → 100644
View file @ fd2452d6
<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>
vu/src/components/Upload/EditUpload.vue
View file @ fd2452d6
<template lang="html"> <template lang="html">
<div class="upload-image-wrap" ref="uploadImage"> <div
ref="uploadImage"
class="upload-image-wrap">
<div v-if="multiple"> <div v-if="multiple">
<ul class="upload-image-items" v-if="currImages.length"> <ul
<li class="upload-image-item" v-for="(item, inx) in currImages" :disabled="disabled"> v-if="currImages.length"
<div class="image-inner" v-resize="item"></div> class="upload-image-items">
<div class="image-after" @click.stop="deleteImage(inx)"></div> <li
</li> v-for="(item, inx) in currImages"
<li class="upload-image-item upload-icon"> :disabled="disabled"
<upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError"> class="upload-image-item">
<slot></slot> <div
</upload-img> v-resize="item"
</li> class="image-inner"/>
</ul> <div class="image-after">
<div class="upload-icon" v-else> <span @click.stop="deleteImage(inx)"/>
<upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError"> <span @click.stop="lookImage(item)"/>
<slot></slot> </div>
</upload-img> </li>
</div> <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>
<div v-else> <div v-else>
<div class="upload-icon single-upload"> <div class="upload-icon single-upload">
<div class="single-upload-icon" v-resize="currImages"> <div
<span v-if="currImages">修改图片</span> v-resize="currImages"
</div> class="single-upload-icon">
<div :class="{ hide: currImages != false }" class="single-upload-body"> <span v-if="currImages">修改图片</span>
<upload-img class="multiple" @upload-img="onSingleUpload" @uploaded="onUploaded" @error="onUploadError"> </div>
<slot v-if="currImages == false"></slot> <div
</upload-img> :class="{ hide: currImages != false }"
</div> 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>
</div> </div>
</template> </template>
<script> <script>
// import './webuploader' // import './webuploader'
import Resize from '@/components/Upload/utils/resizeImage' import Resize from '@/components/Upload/utils/resizeImage'
import UploadImg from '@/components/Upload/UploadImgBox' import UploadImg from '@/components/Upload/UploadImgBox'
import PreviewImg from '@/components/PreviewImg'
export default { export default {
data () { directives: {
return { Resize
inputValue: this.value },
} components: {
PreviewImg,
UploadImg
},
props: {
value: {
type: [Array, String]
}, },
directives: { limit: {
Resize type: Number
}, },
props: { disabled: Boolean,
value: { multiple: Boolean
type: [Array, String] },
}, data() {
limit: { return {
type: Number inputValue: this.value,
}, isflag: false,
disabled: Boolean, silders: ''
multiple: Boolean }
},
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: { onSingleUpload(res) {
value (newVal) { if (!res.data.file_url) return
this.inputValue = newVal this.inputValue = res.data.file_url
} this.$emit('input', res.data.file_url)
}, },
computed: { // 上传完成
currImages () { onUploaded(res) {
if (this.multiple && Array.isArray(this.inputValue)) {
let images = [...this.inputValue]
return images.length ? images : []
} else {
return this.inputValue || ''
}
}
}, },
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) { onUploadError(error) {
console.log(error) console.log(error)
}, },
deleteImage (inx) { deleteImage(inx) {
this.inputValue.splice(inx, 1) this.inputValue.splice(inx, 1)
this.$emit('input', this.inputValue) this.$emit('input', this.inputValue)
}
}, },
components: {
UploadImg lookImage(item) {
this.isflag = true
this.silders = item
} }
}
} }
</script> </script>
...@@ -164,11 +207,42 @@ export default { ...@@ -164,11 +207,42 @@ export default {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-100%, -50%);
width: 18px; width: 18px;
height: 18px; height: 18px;
background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat; 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 { &[disabled]::before {
position: absolute; 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