简介
滑块组件总体来说还是比较简单的,但是还是涉及到了很多原生的js知识,下图是一个最基本的滑块组件
可以看出主要分为滑块轨道部分和滑块按钮这2大部分,而滑块轨道已滑过的蓝色部分也是一个部分,包含在滑块轨道内,然后上方的数字是Element的tooltip组件
对于上面的组件,鼠标按住滑块按钮拖动便可以进行滑动,然后点击滑块轨道也能够将滑块移动到指定位置,因此主要逻辑就是拖动的实现和点击轨道的逻辑,官网代码点此
组件的html结构
简化后的html结构如下
<div class="el-slider" ...
//数字输入框
<el-input-number v-if="showInput">
</el-input-number>
//滑块轨道
<div class="el-slider__runway"
//已经滑过的轨道
<div class="el-slider__bar" :style="barStyle">
</div>
//第一个滑块按钮
<slider-button></slider-button>
//第二个滑块按钮
<slider-button></slider-button>
//滑块轨道的间断点
<div class="el-slider__stop"></div>
</div>
</div>
</div>
复制代码
上面的结构看着多,其实大多都是附属结构,上面的输入框就是由用户选项开启,然后有2个按钮,主要是用于范围选择,一般情况只用第一个按钮,最后的间断点其实也很少用到,上面的<slider-button>
是单独的一个组件,因为这个组件会涉及到很多东西,所以单独做成了一个组件
再简单分析下css,由图中可以推断出蓝色部分的已滑过背景的div肯定是绝对定位的,然后滑块按钮也是绝对定位,而滑块轨道相对定位,通过改变蓝色部分的width来改变其长度,滑块按钮的位置是由left来确定,是个百分比
滑块按钮源码分析
首先先看下这个滑块组件的用法,最基础的组件仅仅需要如下代码就行
<el-slider v-model="value1"></el-slider>
复制代码
value1是data中的值,当滑动滑块时这个值也会改变。我们先从slider-button这个按钮组件进行分析,因为它才是核心,该组件的代码200多行,可见不简单啊,仅仅一个子组件就那么多,html结构如下
<template>
<div
class="el-slider__button-wrapper"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
@mousedown="onButtonDown"
@touchstart="onButtonDown"
:class="{ 'hover': hovering, 'dragging': dragging }"
:style="wrapperStyle"
ref="button"
tabindex="0"
@focus="handleMouseEnter"
@blur="handleMouseLeave"
@keydown.left="onLeftKeyDown"
@keydown.right="onRightKeyDown"
@keydown.down.prevent="onLeftKeyDown"
@keydown.up.prevent="onRightKeyDown"
>
<el-tooltip
placement="top"
ref="tooltip"
:popper-class="tooltipClass"
:disabled="!showTooltip">
<span slot="content">{
{ formatValue }}</span>
<div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
</el-tooltip>
</div>
</template>
复制代码
这是一个wrapper里面嵌套了一个div