1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <template>
| <div class="weui-tab">
| <div class="weui-navbar">
| <a href="javascript:" class="weui-navbar__item" :class="{'weui-bar-active': item.active}"
| v-for="(item, index) in tablist" :key="index" @click="tabChange(item)">
| {{item.name}}
| </a>
| </div>
| </div>
| </template>
|
| <script>
| export default {
| name: 'tabComponent',
| props: {
| tabs: {
| type: Array,
| required: true
| }
| },
| data () {
| return {
| tablist: null
| }
| },
| methods: {
| tabChange (param) {
| this.tablist = this.tablist.map(cell => {
| if (param.type === cell.type) {
| cell.active = true
| } else {
| cell.active = false
| }
| return cell
| })
| this.$emit('tabchange', {
| value: param.type ? param.type : null
| })
| }
| },
| mounted: function () {
| this.tablist = this.tabs
| }
| }
| </script>
|
| <style scoped>
| .weui-tab {
| height: 48px;
| }
| .weui-navbar {
| background: #ffffff;
| }
| .weui-navbar .weui-navbar__item {
| padding: 12px 0;
| }
| .weui-navbar .weui-navbar__item:after {
| border-right: none;
| }
| .weui-navbar .weui-navbar__item:active {
| background: none;
| }
| .weui-bar-active {
| color: #ff0000;
| }
| </style>
|
|
