图片右上角添加关闭效果
html:
<div class="img-box">
<img :src="file.src" class="cover-img"><span class="image-remove" @click="removeImage(index)">+</span>
</div>
css style:
.img-box{
display: inline-block; //设置inline-block使img填充div宽高,然后用+定位到右上角,block占据一整行,不能自适应内部元素宽高,inline使宽度自适应,但是无法设置宽高:宽高无效,+就无法定位到右上角
border: 1px solid #ececec;position: relative;
}
.cover-img{
max-width: 800px;//设置最大宽度,以免溢出::::不要设置百分比80%,否则div会是img的125%,导致+定位到右侧
min-width: 200px;
}
.image-remove{
background-color: white;
font-color: #ececec;
font-size: 30px;
width: 30px;
height: 30px;
text-align: center;
border-radius: 100%;transform: rotate(45deg);
cursor:pointer;
opacity: 0.5;
top:2px;
right:2px; //top、right: 距离上侧2个像素,距离右侧两个像素,也就是右上角
display: block; //块元素:设置宽和高,inline元素设置宽高无效
position: absolute; //绝对定位,关联父元素的relative
}
原理:
显示一张图片,图片右上角显示一个+,然后将+旋转45度,然后为+添加点击事件
使用一个div包含图片,然后根据绝对定位将+放置于div右上角
图片大小不一,就不能用定位将+置于右上角:除非强制设定图片宽高
div可以使用img填充宽高,然后+利用div定位
效果图如上,因为设置了min-width所以会有缩放,只是怕用户选中太小的图片,到时候叉叉比图片还大