我这是一个关注的页面,功能是单选和全选,然后去各自的取消。我用的不是input框,用的是阿里的icon图标。先开始把图标隐藏,然后点击的时候再出现,再次点击就消失。
<template>
<div class="content">
<div class="guan"><span>关注你感兴趣的人</span></div>
<div class="box">
<div class="zyun">
<div class="zyun-z" @click="tap(i)" v-for="(item,i) in list" :key='item.i'>
<div class="z-a">
<i v-show="item.icon" class="iconfont icon-duihao"></i>
</div>
<p>{{ item.name }}</p>
<p v-if="item.names==item.names">{{ item.names }}</p>
<p v-else></p>
</div>
</div>
<div @click="tap1()" class="guanzhu">{{ tie }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tie:'一键关注',
ties:'一键取消',
list:[
{
icon:false,
name:'我有一只猫',
names:'生活达人',
},
{
icon:false,
name:'momo家',
names:'穿搭能手',
},
{
icon:false,
name:'小汐姐',
names:'宝宝1岁3个月',
},
{
icon:false,
name:'我有一只猫',
names:'',
},
{
icon:false,
name:'momo家',
names:'',
},
{
icon:false,
name:'小汐姐',
names:'',
},
{
icon:false,
name:'我有一只猫',
names:'',
},
{
icon:false,
name:'momo家',
names:'',
},
{
icon:false,
name:'小汐姐',
names:'',
},
{
icon:false,
name:'我有一只猫',
names:'',
},
{
icon:false,
name:'momo家',
names:'',
},
{
icon:false,
name:'小汐姐',
names:'',
},
]
};
},
methods:{
tap(i){
this.list[i].icon=!this.list[i].icon
},
tap1(){
// console.log(this.list)
var _this=this;
for(var i=0;i<_this.list.length;i++){//重新遍历根据索引值来全选和取消
// console.log(_this.list[i].icon)
_this.list[i].icon=!_this.list[i].icon;
}
}
}
}
</script>
<style scoped>
.content{
width: 100%;
height: auto;
overflow: auto;
display: flex;
flex-direction: column;
flex: 1;
}
.box{
width: 96%;
box-sizing: border-box;
padding: 0 0.625rem;
background: #F8F8F8;
margin: auto;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}
.zyun{
width: 100%;
display: flex;
justify-content: space-around;
flex-flow: wrap;
box-sizing: border-box;
padding:1.25rem ;
}
.zyun-z{
background: #F8F8F8;
width: 5rem;
margin: 0.625rem 0;
}
.z-a{
width: 4.625rem;
height: 4.625rem;
background-color: rgba(217, 217, 217, 1);
border-radius:50% ;
}
.iconfont {
float: right;
color: #F7A226;
}
.zyun-z p{
font-size: 0.75rem;
color: #A6A4A4;
text-align: center;
}
.guan{
width: 100%;
height: 1.875rem;
display: flex;
justify-content: center;
margin: 0.9375rem 0;
}
.guan span{
width: 7.5rem;
text-align: center;
line-height: 1.875rem;
background: #F8F8F8;
font-size: 0.875rem;
color: #A4A2A2;
}
.guanzhu{
width: 7.5rem;
height: 1.875rem;
text-align: center;
line-height: 1.875rem;
background: #D7D5D5;
font-size: 0.875rem;
color: #646464;
border-radius:20% ;
position: absolute;
bottom: 1.25rem;
left: 30%;
}
</style>