1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- import { VantComponent } from '../common/component';
- import { addUnit } from '../common/utils';
- VantComponent({
- classes: [
- 'main-item-class',
- 'content-item-class',
- 'main-active-class',
- 'content-active-class',
- 'main-disabled-class',
- 'content-disabled-class'
- ],
- props: {
- items: {
- type: Array,
- observer: 'updateSubItems'
- },
- activeId: null,
- mainActiveIndex: {
- type: Number,
- value: 0,
- observer: 'updateSubItems'
- },
- height: {
- type: [Number, String],
- value: 300,
- observer: 'updateHeight'
- },
- max: {
- type: Number,
- value: Infinity
- }
- },
- data: {
- subItems: []
- },
- created() {
- this.updateHeight();
- },
- methods: {
- // 当一个子项被选择时
- onSelectItem(event) {
- const { item } = event.currentTarget.dataset;
- const isArray = Array.isArray(this.data.activeId);
- // 判断有没有超出右侧选择的最大数
- const isOverMax = isArray && this.data.activeId.length >= this.data.max;
- // 判断该项有没有被选中, 如果有被选中,则忽视是否超出的条件
- const isSelected = isArray
- ? this.data.activeId.indexOf(item.id) > -1
- : this.data.activeId === item.id;
- if (!item.disabled && (!isOverMax || isSelected)) {
- this.$emit('click-item', item);
- }
- },
- // 当一个导航被点击时
- onClickNav(event) {
- const index = event.detail;
- const item = this.data.items[index];
- if (!item.disabled) {
- this.$emit('click-nav', { index });
- }
- },
- // 更新子项列表
- updateSubItems() {
- const { items, mainActiveIndex } = this.data;
- const { children = [] } = items[mainActiveIndex] || {};
- return this.set({ subItems: children });
- },
- updateHeight() {
- this.setData({
- innerHeight: addUnit(this.data.height)
- });
- }
- }
- });
|