mkl_power_box/components/screen-foot.js

/**
 * 顶部header
 */
Vue.component("screen-foot", {
    template: `
        <div class="foot-max" ref="foot" @mouseout="footMouseout"  @mouseover="footMouseover">
            <div class="foot-min">
                <div class="foot-content">
                    <div class="foot-mouse"></div>
                    <el-row>
                        <el-col :span="1">
                            <div class="foot-content-left" @click="leftClick"></div>
                        </el-col>
                        <el-col :span="22">
                            <div class="foot-content-tabs">
                                <div class="foot-content-tabs-min" :style="{'width': width+'px','left':index*250+'px'}" ref="tabs">
                                    <div class="foot-tabs" v-for="(item,i) in data" @click="footTabs(i)">
                                        <div :class="active==i?'foot-tabs-bgd active':'foot-tabs-bgd'">{{item.text}}</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="1">
                            <div class="foot-content-right" @click="rightClick"></div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    `,
    props: {
        data:{
            type:Array
        },
        indexes:{
            type:Number
        }
    },
    data() {
        return {
            bottom:false,
            width:0,
            index:2,
            active:0,
            length: 0,
            interval:undefined,
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            this.divWidth();
            this.active = this.indexes
            this.index = this.indexes
            var that = this
            // this.interval = setInterval(that.timer,600000);
        },
        footMouseover(){
            let bottom = this.$refs.foot
            if(this.bottom == false){
                bottom.style.bottom = 0
                this.bottom =true
            }
        },
        footMouseout(){
            let bottom = this.$refs.foot
            if(this.bottom == true){
                bottom.style.bottom = -90+'px'
                this.bottom =false
            }
        },
        divWidth(){
            var width = this.data.length * 250
            this.width = width
            this.length =this.data.length
        },
        leftClick(){
            let slider = this.$refs.tabs
            if(slider.style.left == '500px'){

            }else{
                this.index = this.index+1
                this.active = this.active-1
            }
            this.$emit('indexes',this.active);
        },
        rightClick(){
            let slider = this.$refs.tabs
            if(slider.style.left == -(this.length - 3)*250+'px'){

            }else{
                this.index = this.index-1
                this.active = this.active+1
            }
            this.$emit('indexes',this.active);
        },
        footTabs(i){
            this.active = i
            this.index = 2 - i;
            this.$emit('indexes',this.active);
        },
        timer(){
            let slider = this.$refs.tabs
            if(slider.style.left == -(this.length - 3)*250+'px'){
                this.index = 2
                this.active = 0
            }else{
                this.index = this.index - 1
                this.active = 2 - this.index
            }
            this.$emit('indexes',this.active);
        }
    },
    watch:{
        index:function () {
            this.init()
        }
    },

})