'tabToggle(index)'> <span :class='{dropdownBtn: index == 0}' @click='dropdown'>{{tabItem}}</span>
<ul v-if='index == 0' class="dropdownWrapper" v-show='dropdownActive'>
<li v-for='(item, index) in dropParams'>{{item}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
导航菜单return {
nowIndex: 0,
dropdownActive: false,
tabParams: ['政治', '娱乐', '体育', '搞笑'],
dropParams: ['亚洲', '北美洲', '欧洲', '⾮洲']
}
},
methods: {
dropdown: function(){
console.log(Attribute('class'))
if(Attribute('class') === 'dropdownBtn') {
this.dropdownActive = !this.dropdownActive;
}
},
tabToggle: function(index){
if(index === 0){
return
}else {
this.dropdownActive = false;
}
}
},
}
</script>
<style scoped>
@import './reset.css';
@import './reset.css';
body {
min-height: 100%;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.wrapper>div {
flex: 1;
text-align: center;
height: 36px;
line-height: 36px;
}
.dropdownWrapper {
/*margin-top: 36px;*/
border: 1px solid #2C3E50; font-size: 14px;
}
.dropdownWrapper li {
display: block;
}
.nav-item.active {
background: #e3e3d3;
}
.dropdownBtn {
display: inline-block;
width: 100%;
height: 100%;
}
.nav-item {
cursor: pointer;
}
</style>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000602
发表评论