<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 500px;
height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
}
.title {
display: flex;
background: #ccc;
}
.title div {
flex: 1;
text-align: center;
padding: 10px 0px;
}
.title div.active {
background: orangered;
color: #fff;
}
.content div {
padding: 10px;
}
</style>
<body>
<div id="app">
<tab>
<tab-item label="火车票">火车票火车票火车票火车票火车票火车票</tab-item>
<tab-item label="汽车票">汽车票汽车票汽车汽车票汽车票汽车票汽车票汽车 票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽 车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽汽车票汽车票汽车汽车票汽车票汽车票汽车票汽车 票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽 车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票汽车票票汽车票汽车票汽车票
</tab-item>
<tab-item label="飞机票">飞机票飞机票飞机票飞机票飞机票飞机票</tab-item>
</tab>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('tab-item', {
// 建一个组件
props: ['label'],
data() {
return {
isshow: false
}
},
mounted() {
console.log(this.$parent.activeIndex)
},
template: `
<div v-show="isshow">
<slot></slot>
</div>
`
})
Vue.component('tab', {
data() {
return {
titles: [],
activeIndex: 0
}
},
template: `
<div class="container">
<div class="title">
<div v-for="(item,i) in titles" @click="activeIndex=i" :class="{active:activeIndex===i}">
{{item}}
</div>
</div>
<div class="content">
<slot></slot>
</div>
</div>
`,
computed: {
},
watch: {
activeIndex(val) {
console.log(this.$children[val].isshow)
this.$children.forEach(e => {
return e.isshow = false
})
this.$children[val].isshow = true
}
},
mounted() {
this.titles = this.$children.map(r => {
return r.label
})
this.$children[0].isshow = true
}
})
new Vue({
el: '#app',
data() {
return {
}
}
})
</script>
</body>
</html>
网友评论