参考1:https://blog.csdn.net/Just_Maybe/article/details/103597060
参考2:画三角形:https://blog.csdn.net/ka_xingl/article/details/117251528
获取最后一个元素:&:last-child {}
div{
margin-right: 10px;
&:last-child{
margin-right: 0px;
}
}
原理:
<div class="select-box">
<div class="box">
<div>全部</div>
<div class="box-con">
<span>×</span>
</div>
</div>
<div class="box">
<div>水污染</div>
<div class="box-con">
<span>×</span>
</div>
</div>
<div class="box">
<div>大气污染</div>
<div class="box-con">
<span>×</span>
</div>
</div>
<div class="box">
<div>土壤污染</div>
<div class="box-con">
<span>×</span>
</div>
</div>
</div>
.select-box {
display: flex;
.box {
width: 86px;
height: 36px;
line-height: 36px;
background: rgba(30, 37, 48, 0.6);
border: 1px solid #67e5ff;
border-radius: 4px;
font-size: 14px;
color: #67e5ff;
text-align: center;
position: relative;
overflow: hidden;
}
.box:nth-child(-n + 3) {
margin-right: 16px;
}
.box .box-con {
width: 30px;
height: 30px;
position: absolute;
background: #67e5ff;
top: -15px;
right: -15px;
transform: rotate(45deg);
}
.box .box-con span {
position: absolute;
bottom: 0;
display: block;
width: 24px;
height: 24px;
text-align: center;
transform: rotate(-45deg);
color: #000;
}
}
实现点击切换:
方法一:
实现原理:利用三元表达式来添加不同类名、控制显示隐藏、display:none
<template>
<div class="select-box">
<div :class="item.selected === true ? 'box active' : 'box'" v-for="(item, index) in tabList" :key="index" @click="changePollutionType(item, $event)">
<div>{{ item.label }}</div>
<div :class="item.selected === true ? 'box-con' : 'con-none'">
<span>×</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
tabList: [
{ label: '全部', value: '全部', selected: false },
{ label: '水污染', value: '水污染', selected: false },
{ label: '大气污染', value: '大气污染', selected: false },
{ label: '土壤污染', value: '土壤污染', selected: false },
],
}
},
methods: {
changePollutionType(item, e) {
if (item.selected === true) {
item.selected = false
} else {
item.selected = true
}
},
},
}
</script>
<style lang="scss" scoped>
.select-box {
display: flex;
.box {
width: 86px;
height: 36px;
line-height: 36px;
background: rgba(30, 37, 48, 0.6);
border: 1px solid #67e5ff;
border-radius: 4px;
font-size: 14px;
color: #67e5ff;
text-align: center;
position: relative;
overflow: hidden;
cursor: pointer;
&.active {
background: rgba(6, 44, 103, 0.6);
}
}
.box:nth-child(-n + 3) {
margin-right: 16px;
}
.con-none {
display: none;
}
.box .box-con {
width: 30px;
height: 30px;
position: absolute;
background: #67e5ff;
top: -15px;
right: -15px;
transform: rotate(45deg);
}
.box .box-con span {
position: absolute;
bottom: 0;
display: block;
width: 24px;
height: 24px;
text-align: center;
transform: rotate(-45deg);
color: #000;
}
}
.icon-duigou:before {
content: '\E606';
font-size: 4px;
}
</style>
实现方法二:
实现原理:利用伪类、js中动态添加类名
<template>
<div class="tab-list-box">
<div class="tab-list" v-for="(item, index) in tabList" :key="index" @click="changePollutionType(item, $event)">
<div class="tab-item">{{ item.label }}</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
tabList: [
{ label: '全部', value: '全部', selected: false },
{ label: '水污染', value: '水污染', selected: false },
{ label: '大气污染', value: '大气污染', selected: false },
{ label: '土壤污染', value: '土壤污染', selected: false },
],
}
},
methods: {
changePollutionType(item, e) {
if (item.selected === true) {
item.selected = false
} else {
item.selected = true
}
if (e.target.className === 'tab-item') {
e.target.className = 'tab-item active' //切换按钮
} else {
e.target.className = 'tab-item' //切换按钮
}
},
},
}
</script>
<style lang="scss" scoped>
.tab-list-box {
margin-top: 20px;
.tab-list {
display: inline-block;
.tab-item {
width: 86px;
height: 36px;
background: rgba(30, 37, 48, 0.6);
border: 1px solid #67e5ff;
opacity: 1;
border-radius: 4px;
text-align: center;
line-height: 36px;
cursor: pointer;
position: relative;
&.active {
background: rgba(6, 44, 103, 0.6);
}
&.active::before {
content: '';
width: 0;
height: 0;
border: 15px solid transparent;
border-right: 15px solid #67e5ff;
transform: rotate(135deg);
position: absolute;
right: -15px;
top: -16px;
cursor: pointer;
}
&.active::after {
content: 'x';
width: 16px;
height: 16px;
color: #fff;
position: absolute;
right: 0px;
top: -11px;
cursor: pointer;
}
}
}
.tab-list:nth-child(-n + 3) {
margin-right: 16px;
}
}
</style>
额外补充:右上角的删除符号
参考:https://juejin.cn/post/6844904001750695943
效果: