同学,先看一下效果吧!!!!
看到了吧,这就是我要完成的,效果哦,上面的标签卡,我要选中,并且还可以多选,我还可以取消任意一个。
首先,看看,这行代码
定义,一个数组
最后也逻辑
<template>
<view class="complain">
<!-- 投诉类型 -->
<view class="type">
<text class="type-title">投诉类型</text>
<view class="type-view">
<view class="type-li" v-for="(item, index) in typeLi" :key="index" @tap="hander(index, $event)">
<!-- <view class="type-item" :class="isactive == index ? 'addclass' : '' ">{{item.name}}</view> -->
<view class="type-item" :class="{ bgcolor: spanIndex.indexOf(index) > -1 }">{{ item.name }}</view>
</view>
</view>
</view>
<!-- 投诉文本 -->
</view>
</template>
<script>
export default {
data() {
return {
typeLi: [
{
name: '服务态度'
},
{
name: '菜品问题'
},
{
name: '付款问题'
}
],
// 选中
isactive: 0,
spanIndex: []
};
},
onLoad() {},
methods: {
hander(index, e) {
// console.log(index, e);
// this.isactive = index
let arrIndex = this.spanIndex.indexOf(index);
console.log(arrIndex);
if (arrIndex > -1) {
this.spanIndex.splice(arrIndex, 1);
} else {
this.spanIndex.push(index);
}
}
}
};
</script>
<style lang="scss" scoped>
.complain {
padding: 0 40rpx;
box-sizing: border-box;
// 投诉类型
.type {
.type-title {
line-height: 2;
font-size: 36rpx;
}
.type-view {
display: flex;
.type-li {
margin-right: 20rpx;
.type-item {
width: 170rpx;
height: 60rpx;
border-radius: 30rpx;
border: 1px solid #ccc;
color: #666;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.bgcolor {
background-color: #f0ad4e;
color: #fff !important;
border: 1px solid #f0ad4e !important;
}
}
// 投诉文本
}
</style>