修改选中adv组件报错的问题
This commit is contained in:
@ -8,19 +8,39 @@
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<img v-if="imageUrl" :src="imageUrl" class="single-img__img">
|
||||
<i v-else class="el-icon-upload">
|
||||
<img
|
||||
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__tip" slot="tip">{{tip}}</div>
|
||||
<div
|
||||
class="el-upload__tip"
|
||||
slot="tip"
|
||||
>{{tip.label}}</div>
|
||||
</i>
|
||||
</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-shanchu1" @click="delImage"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="图片展示" :visible.sync="dialogVisible">
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
<el-dialog
|
||||
title="图片展示"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<img
|
||||
width="100%"
|
||||
:src="dialogImageUrl"
|
||||
alt=""
|
||||
>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -41,12 +61,12 @@ export default {
|
||||
default: ''
|
||||
},
|
||||
tip: {
|
||||
type: String,
|
||||
default: '建议尺寸: 1080*900px, 小于1MB'
|
||||
type: Object,
|
||||
default:()=>({}),
|
||||
}
|
||||
},
|
||||
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: {
|
||||
handleAvatarSuccess (res, file) {
|
||||
@ -71,53 +91,53 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.single-img{
|
||||
&__box{
|
||||
position: relative;
|
||||
>>> .el-upload{
|
||||
width: 100%;
|
||||
.single-img {
|
||||
&__box {
|
||||
position: relative;
|
||||
>>> .el-upload {
|
||||
width: 100%;
|
||||
}
|
||||
>>> .el-upload-dragger {
|
||||
width: 100%;
|
||||
.el-upload__text {
|
||||
line-height: 40px;
|
||||
}
|
||||
>>> .el-upload-dragger{
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
.el-upload__tip {
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
&__img{
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
&:hover .overlay {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 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>
|
||||
|
Reference in New Issue
Block a user