play-with-pc/src/components/tab/mixins/handle.ts

import { nextTick } from 'vue';
export default <LibMixins>{

    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<tabDataObject> {

            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;
                }
            }
        }
    }


}