vue仿Element 一比一跑马灯

直接上代码

• 父组件外层

	<template>
    <div class="carousel" :style="installStyle">
        <slot></slot>
    </div>
</template>

<script >
export default {
    name: 'lunbo',
    props: {
        // 轮播图是否轮播
        autoPlay: {
            type: Boolean,
            default: true
        },

        // 初始轮播下标
        installIndex: {
            type: Number | String,
            default: 2
        },

        //轮播时间
        playTimes: {
            type: Number | String,
            default: 3000
        },

        //自定义样式
        installStyle: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            installIndexShow: this.installIndex,
            t: null

        }
    },
    mounted() {
        this.handelAutoPlay()
        console.log(this.$slots,'fu');
    },
    beforeMount(){
        clearInterval(this.t)
    },
    methods: {
        handelAutoPlay() {
            if (this.autoPlay) {
               this.t = setInterval(() => {
                if(this.installIndexShow < this.$slots.default.length-1){
                    this.installIndexShow ++
                }else{
                    this.installIndexShow = 0
                }
                console.log(this.installIndexShow);
                }, this.playTimes)
            }
        }
    },
    component: {
        installStyle() {
            return this.installStyle
        },
    }
}
</script>
<style lang="scss" scoped>
.carousel {
    width: 100%;
    height: 500px;
    position: relative;
}
</style>

• 子组件

	<template>
    <div class="carousel_item" v-if="installIndex == showIndex">
        <slot></slot>
    </div>
</template>

<script >
export default {
    name: 'lunboItem',
    data() {
        return {
            installIndex: this.$options.parent.installIndexShow,
            showIndex: this.$options._parentVnode.key
        }
    },
    watch: {
        '$options.parent.installIndexShow': {
            handler(newValue) {
               this.installIndex = newValue
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        console.log(this.$options, 'ad');
        setInterval(() => {
            console.log(this.$options, '子');
        }, 3000)
    }
}
</script>
<style lang="scss" scoped>
.carousel_item {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    img {
        width: 100%;
        height: 100%;
    }
}
</style>

• 引用

		<template>
  <div class="about">
    <mhh-lunbo >
      <mhh-lunbo-item v-for="(item,index) of lunboData" :key="index">
        <img :src="item.img" alt="">
      </mhh-lunbo-item>
    </mhh-lunbo>
  </div>
</template>
<script>
import mhhLunbo from '@/components/mhh-lunbo.vue'
import MhhLunboItem from '@/components/mhh-lunbo-item.vue';
export default {
  data() {
    return {
      lunboData:[
        {
          img:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'
        },
        {
          img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F55402f62682e3.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671170559&t=9a34e7d2fbf6773000124ddca292e327'
        },
        {
          img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671170559&t=ded67e02699f71f2565851120216c427'
        },{
          img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671170559&t=43667e770f8e801c100686cc34270620'
        }
      ]
    }
  },
  components: {
    mhhLunbo,
    MhhLunboItem
  }
}
</script>

• 可通过VNode节点 添加动画