修改选中adv组件报错的问题
This commit is contained in:
@ -8,19 +8,39 @@
|
|||||||
:before-upload="beforeAvatarUpload"
|
:before-upload="beforeAvatarUpload"
|
||||||
:show-file-list="false"
|
:show-file-list="false"
|
||||||
>
|
>
|
||||||
<img v-if="imageUrl" :src="imageUrl" class="single-img__img">
|
<img
|
||||||
<i v-else class="el-icon-upload">
|
v-if="imageUrl"
|
||||||
|
:src="imageUrl"
|
||||||
|
class="single-img__img"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
v-else
|
||||||
|
class="el-icon-upload"
|
||||||
|
>
|
||||||
<div class="el-upload__text"><em>选择图片</em></div>
|
<div class="el-upload__text"><em>选择图片</em></div>
|
||||||
<div class="el-upload__tip" slot="tip">{{tip}}</div>
|
<div
|
||||||
|
class="el-upload__tip"
|
||||||
|
slot="tip"
|
||||||
|
>{{tip.label}}</div>
|
||||||
</i>
|
</i>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<div class="overlay" v-if="imageUrl">
|
<div
|
||||||
|
class="overlay"
|
||||||
|
v-if="imageUrl"
|
||||||
|
>
|
||||||
<!-- <i class="iconfont icon-chakan" @click="showImage"></i>
|
<!-- <i class="iconfont icon-chakan" @click="showImage"></i>
|
||||||
<i class="iconfont icon-shanchu1" @click="delImage"></i> -->
|
<i class="iconfont icon-shanchu1" @click="delImage"></i> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog title="图片展示" :visible.sync="dialogVisible">
|
<el-dialog
|
||||||
<img width="100%" :src="dialogImageUrl" alt="">
|
title="图片展示"
|
||||||
|
:visible.sync="dialogVisible"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
width="100%"
|
||||||
|
:src="dialogImageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -41,12 +61,12 @@ export default {
|
|||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
tip: {
|
tip: {
|
||||||
type: String,
|
type: Object,
|
||||||
default: '建议尺寸: 1080*900px, 小于1MB'
|
default:()=>({}),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.fileUploadURL = process.env.VUE_APP_BASE_API +'/api/canvas/upload?name=demo&type=console'
|
this.fileUploadURL = process.env.VUE_APP_BASE_API + '/api/canvas/upload?name=demo&type=console'
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleAvatarSuccess (res, file) {
|
handleAvatarSuccess (res, file) {
|
||||||
@ -71,53 +91,53 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.single-img{
|
.single-img {
|
||||||
&__box{
|
&__box {
|
||||||
position: relative;
|
position: relative;
|
||||||
>>> .el-upload{
|
>>> .el-upload {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
>>> .el-upload-dragger {
|
||||||
|
width: 100%;
|
||||||
|
.el-upload__text {
|
||||||
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
>>> .el-upload-dragger{
|
.el-upload__tip {
|
||||||
width: 100%;
|
line-height: 1em;
|
||||||
.el-upload__text{
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
.el-upload__tip{
|
|
||||||
line-height: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.overlay{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:hover .overlay{
|
|
||||||
position: absolute;
|
|
||||||
top:0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0,0,0,0.3);
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
.iconfont{
|
|
||||||
padding: 5px;
|
|
||||||
margin: 0 5px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__img{
|
.overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:hover .overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
max-width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
margin: auto;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.iconfont {
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&__img {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user