element 源码学习六 —— Carousel 走马灯学习

最新推荐文章于 2023-09-02 15:42:15 发布

weixin_34021089

最新推荐文章于 2023-09-02 15:42:15 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000014384638

本文详细探讨了Element UI中的Carousel组件，从源码角度解析其工作原理，包括页面切换、指示器、切换按钮的实现，以及动画效果、卡片化效果、按钮过渡和自动切换功能。同时，文中通过实例展示了如何自己实现一个简单的走马灯效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单使用

走马灯功能在展示图片时经常用到，而 element 中提供了 Carousel 组件。出于好奇学习一下它的实现原理。
具体的功能详情请查阅官方文档。
关于组件属性，该组件提供了组件高度、索引、指示器、切换时间等一众配置，这个只要动手试一遍都能理解。
关于事件，提供了一个 change 事件。可以通过 v-on:change="changeFun" 事件绑定来监听。该事件传递了两个参数：当前页索引和前一页索引。参考源码中的 $emit 方法：

  watch: {
    activeIndex(val, oldVal) {
      this.resetItemPosition(oldVal);
      this.$emit('change', val, oldVal);
    },
  },

关于方法，组件提供了三个方法用于操作组件页面的切换。使用方法是通过 $ref 子组件引用来访问子组件，执行其方法。

                // 假设为 el-carousel 设置了 ref="car"
                // setActiveItem    手动切换幻灯片    需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值
                // prev    切换至上一张幻灯片
                // next 切换至下一张幻灯片
                pre() {
                    this.$refs.car.prev()
                },
                next() {
                    this.$refs.car.next()
                },
                first() {
                    this.$refs.car.setActiveItem(0)
                }