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

本文详细分析了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>
复制代码

这是一个wrapper里面嵌套了一个div

### 关于 `van-slider` 组件的使用 #### 安装 Vant 库 为了使用 `van-slider`,首先需要安装 Vant 库。Vant 是一个由有赞团队开发的 Vue 移动端组件库[^2]。 ```bash npm install vant ``` #### 导入并注册滑块组件 在项目中导入 `VanSlider` 和其样式文件: ```javascript import { Slider } from 'vant'; import 'vant/lib/index.css'; Vue.use(Slider); ``` #### 基本用法 下面是一个简单的例子展示如何创建一个基本的滑块控件: ```html <template> <div class="slider-demo"> <van-slider v-model="value"></van-slider> </div> </template> <script> export default { data() { return { value: 50, }; }, }; </script> ``` 此代码片段展示了如何通过绑定数据属性来控制滑块的位置。 #### 自定义配置选项 可以自定义多个参数来自定义滑块的行为和外观,比如设置最小最大值范围、步长等特性: ```html <template> <div class="customized-slider"> <van-slider v-model="value" :min="0" :max="100" :step="10" active-color="#ee0a24" inactive-color="#ebedf0" /> </div> </template> <script> export default { data() { return { value: 30, }; }, }; </script> ``` 在这个实例里,设置了活动条的颜色 (`active-color`) 及不活跃部分颜色(`inactive-color`) ,同时也指定了数值变化间隔(`step`)。 #### 处理事件 还可以监听用户的交互动作,例如当用户拖拽结束时触发特定逻辑: ```html <template> <div @change="onChangeHandler" class="event-handling-slider"> <van-slider v-model="value"/> </div> </template> <script> export default { methods: { onChangeHandler(value) { console.log('当前进度:', value); } }, data() { return { value: 75, }; }, }; </script> ``` 这里实现了对改变事件(`@change`) 的处理函数,在每次用户调整完毕后打印新的位置到浏览器控制台。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值