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

简单使用

走马灯功能在展示图片时经常用到，而 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)
                }

源码位置

Carousel 的源码位于 package/carousel/ 目录下。源码目录如下：

简单说下目录内容：

• item.vue carousel-item 组件代码
• main.vue carousel 组件代码
• _index.js 导出 carousel-item 和 carousel
• cooking.conf.js cooking 配置
• index.js 导出 carousel 组件
• package.json 组件信息
• index.js 导出 carousel-item 组件

其实主要就是两个 .vue 文件，其他都是些配置、导出的功能文件，这里可以忽略不看~