简单使用
走马灯功能在展示图片时经常用到,而 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
文件,其他都是些配置、导出的功能文件,这里可以忽略