elemenui中使用伪元素
这里做的是点击图片,图片出现边框选中的样式,左上角的三角形和勾号是用为元素做的。
需要注意的是:
1.不要在img标签上加伪元素,我当时就是加了伪元素不显示,然后就在外面加了个div包裹,然后把伪元素加在外面一层的div上;
2.如果用elementui上的icon图标的话,font-family:element-icons!important;这是重点。
代码:
<template>
<div class="onlineText">
<div class="imgWrap" @click="clickPic" :class="{'activeClass':searched}">
<img src="http://47.100.174.78:80/images/cake-1001/img1.png" alt="" width="200">
</div>
</div>
</template>
<script>
export default {
name: "onlineText",
data() {
return {
searched:true
};
},
methods:{
clickPic(){
this.searched=!this.searched;
}
}
};
</script>
<style lang="less">
.onlineText{
height: 600px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
.imgWrap{
width: 200px;
height: 200px;
cursor: pointer;
position: relative;
img{
width: 200px;
height: 200px;
}
&.activeClass{
border: 3px solid red;
box-sizing: content-box;
}
&::before{
content:"\e6da";
font-family:element-icons!important;
position: absolute;
left: 1px;
top: -4px;
display: inline-block;
color: #fff;
font-size: 24px;
z-index: 100;
}
&::after{
position: absolute;
left: 0;
top: 0;
content: "";
width: 0px;
height: 0px;
border-color: blue transparent transparent blue;
border-width:20px;
border-style: solid;
}
}
}
</style>
效果: