import { nextTick } from 'vue'; export default { data(){ return { vUseTabData:undefined, vUseTabSelect:undefined, swipeOption:undefined } }, computed:{ swiper(){ if (this.$refs.swiper) { return this.$refs.swiper.swiper; } return undefined; }, // 当前索引的下标 vTabSelect:{ get(this:any):number{ if (this.vUseTabSelect === undefined) { this.vUseTabSelect = this.value === undefined ? this.defaultValue : this.value; } return this.vUseTabSelect; }, set(this:any,value:number) { if (this.vUseTabSelect !== value) { this.vUseTabSelect = value; if (this.vUseTabData && this.vUseTabData[value].loading !== true) { this.vUseTabData[value].loading = true; } // 查看是否需要变更 swiper if (this.swiper && this.swiper.realIndex !== value) { this.swiper.slideTo(value); } // 执行change if (this.value !== value) { return this.$emit('input',value); } } } }, // 当前使用的 data vTabData():Array { if (this.vUseTabData === undefined) { this.vUseTabData = (this.data as tabData).map((item,index):tabDataObject=>{ let result:tabDataObject; if (typeof item === 'string') { result = { label: item, slot:'', loading: false } } else { result = item; } // 设置 loading if (!result.loading) { result.loading = !(index !== this.vTabSelect && this.lazy); } // 设置插槽 result.slot = result.slot || 'tab-'+index; return result; }); } return this.vUseTabData; } }, watch:{ value:function (){ return this.triggerTo(this.value); } }, methods:{ triggerTo(index:number){ if (this.vUseTabSelect !== index) { this.vTabSelect = index; } }, updateAutoHeight(){ if (this.autoHeight) { nextTick(()=> { this.swiper && this.swiper.updateAutoHeight(); }) } } }, mounted() { this.updateAutoHeight(); }, created() { this.swipeOption = { initialSlide: this.vTabSelect, allowTouchMove: this.touchMove, speed: this.speed, autoHeight: this.autoHeight, resizeObserver: this.autoHeight, on:{ slideChangeTransitionStart: (swiper: any)=>{ // 设置执行下标 this.vTabSelect = swiper.realIndex; } } } } }