| 提交 | 用户 | age | ||
| d98d05 | 1 | import { VantComponent } from '../common/component'; |
| S | 2 | VantComponent({ |
| 3 | classes: [ | |
| 4 | 'main-item-class', | |
| 5 | 'content-item-class', | |
| 6 | 'main-active-class', | |
| 7 | 'content-active-class', | |
| 8 | 'main-disabled-class', | |
| 9 | 'content-disabled-class', | |
| 10 | ], | |
| 11 | props: { | |
| 12 | items: { | |
| 13 | type: Array, | |
| 14 | observer: 'updateSubItems', | |
| 15 | }, | |
| 16 | activeId: null, | |
| 17 | mainActiveIndex: { | |
| 18 | type: Number, | |
| 19 | value: 0, | |
| 20 | observer: 'updateSubItems', | |
| 21 | }, | |
| 22 | height: { | |
| 53cc6f | 23 | type: null, |
| d98d05 | 24 | value: 300, |
| S | 25 | }, |
| 26 | max: { | |
| 27 | type: Number, | |
| 28 | value: Infinity, | |
| 53cc6f | 29 | }, |
| S | 30 | selectedIcon: { |
| 31 | type: String, | |
| 32 | value: 'success', | |
| d98d05 | 33 | }, |
| S | 34 | }, |
| 35 | data: { | |
| 36 | subItems: [], | |
| 37 | }, | |
| 38 | methods: { | |
| 39 | // 当一个子项被选择时 | |
| 40 | onSelectItem(event) { | |
| 41 | const { item } = event.currentTarget.dataset; | |
| 42 | const isArray = Array.isArray(this.data.activeId); | |
| 43 | // 判断有没有超出右侧选择的最大数 | |
| 44 | const isOverMax = isArray && this.data.activeId.length >= this.data.max; | |
| 45 | // 判断该项有没有被选中, 如果有被选中，则忽视是否超出的条件 | |
| 46 | const isSelected = isArray | |
| 47 | ? this.data.activeId.indexOf(item.id) > -1 | |
| 48 | : this.data.activeId === item.id; | |
| 49 | if (!item.disabled && (!isOverMax || isSelected)) { | |
| 50 | this.$emit('click-item', item); | |
| 51 | } | |
| 52 | }, | |
| 53 | // 当一个导航被点击时 | |
| 54 | onClickNav(event) { | |
| 55 | const index = event.detail; | |
| 56 | const item = this.data.items[index]; | |
| 57 | if (!item.disabled) { | |
| 58 | this.$emit('click-nav', { index }); | |
| 59 | } | |
| 60 | }, | |
| 61 | // 更新子项列表 | |
| 62 | updateSubItems() { | |
| 63 | const { items, mainActiveIndex } = this.data; | |
| 64 | const { children = [] } = items[mainActiveIndex] || {}; | |
| 53cc6f | 65 | this.setData({ subItems: children }); |
| d98d05 | 66 | }, |
| S | 67 | }, |
| 68 | }); | |
