element走马灯自动_vue Element UI走马灯组件重写

1、element ui走马灯组件 -- carousel

分析一波源代码：

carousel/src/main.vue 文件为 el-carousel文件主要功能

carousel/src/item.vue 文件为 el-carousel-item 功能

2、carousel/src/main.vue文件详解：

1)、左右button切换按钮

class="el-carousel__container"

:style="{ height: height }">

type="button"

v-if="arrow !== 'never'"

v-show="arrow === 'always' || hover"

@mouseenter="handleButtonEnter('left')"

@mouseleave="handleButtonLeave"

@click.stop="throttledArrowClick(activeIndex - 1)"

class="el-carousel__arrow el-carousel__arrow--left">

type="button"

v-if="arrow !== 'never'"

v-show="arrow === 'always' || hover"

@mouseenter="handleButtonEnter('right')"

@mouseleave="handleButtonLeave"

@click.stop="throttledArrowClick(activeIndex + 1)"

class="el-carousel__arrow el-carouse