您的位置：首页 > 产品设计 > UI/UE

用Vue实现好友分组效果

2018-01-30 16:44 381 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签</title>
<style>
body {
background-color: #999;
}
#box {
max-width: 360px;
min-height: 640px;
background-image: linear-gradient(to right bottom, #432b8b, #89049e);
background-size: cover;
margin: 10px auto;
padding: 20px;
box-sizing: border-box;
}
.panel {
margin-bottom: 10px;
background-color: rgba(0,0,0,.3);
border-radius: 5px;
overflow: hidden;
}
.panel-header {
position: relative;
padding: 10px 15px 10px 32px;
cursor: pointer;
color: rgba(255,255,255,.6);
}
.panel-header:before {
position: absolute;
left: 15px;
top: 14px;
content: "";
width: 0;
height: 0;
border-width: 7px 0 7px 8px;
border-style: solid;
border-color: transparent;
border-left-color: rgba(255,255,255,.3);
transition: all .3s;
}
.active .panel-header {
background-color: rgba(228,0,127,.8);
transform: rotateZ(0);
color: rgb(255,255,255);
}
.active .panel-header:before {
transform-style: preserve-3d;
transform: rotateZ(90deg);
transition: all .3s;
border-left-color: rgba(255,255,255,.6);
}
.panel-body {
padding: 10px 20px;
}
.list {
margin: 0;
padding: 0;
list-style: none;
}
.list li {
line-height: 2em;
}
.list li a {
color: rgba(255,255,255,.4);
text-decoration: none;
}
.list li a:hover {
color: #fff;
}
</style>
</head>
<body>
<main id="box">
<div class="panel" v-for="panel,index in panels" :class="{active:index===currentIndex}">
<div class="panel-header" @click="panelSwitch(index)">{{panel.title}}</div>
<div class="panel-body" v-show="index===currentIndex">
<ul class="list">
<li v-for="item in panel.list"><a href="#">{{item}}</a></li>
</ul>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({
el:'#box',
data:{
panels: [
{
title: '中国',
list: ['北京市','上海市','广州市','深圳市']
},
{
title: '美国',
list: ['纽约市','洛杉矶市','芝加哥市','拉斯维加斯市']
},
{
title: '英国',
list: ['伦敦市','伯明翰市','利兹市','格拉斯哥市']
}
],
currentIndex: '' //存储当前索引值
},
methods:{
panelSwitch(index){
this.currentIndex = this.currentIndex === index ? '' : index; //当前索引值等于当前索引值，清空索引值；否则设置为当前索引值
}
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航