Element源码分析系列10 - Slider(滑块)

最新推荐文章于 2024-08-25 09:27:13 发布

weixin_33881041

最新推荐文章于 2024-08-25 09:27:13 发布

阅读量3.6k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5b87bdf36fb9a01a0058bed1

本文详细分析了Element UI中的Slider组件，涵盖了组件的HTML结构、滑块按钮和滑块轨道的源码。主要讨论了滑块按钮的拖动逻辑、点击事件处理以及键盘操作，同时介绍了滑块轨道的点击响应和位置计算。文章揭示了数据传递流程和组件交互的实现细节。

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

简介

滑块组件总体来说还是比较简单的，但是还是涉及到了很多原生的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>
复制代码