Vue实现双向滑动输入条

 更新时间:2022年03月03日 11:10:30   作者:theMuseCatcher  
这篇文章主要为大家详细介绍了Vue实现双向滑动输入条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现双向滑动输入条的具体代码,供大家参考,具体内容如下

效果图如下:

组件支持传入最小值(min)最大值(max)的范围,并可设置初始最小值(initialMin)和初始最大值(initialMax)

拖动滑块调整最大最小值,并可点击输入条位置,切换数值

①创建滑动输入条组件Slider.vue

<template>
  <div class="m-slider" ref="slider">
    <div class="u-slider-rail" @click="onClickPoint"></div>
    <div class="u-slider-track" @click="onClickPoint" :style="`left: ${left}px; right: auto; width: ${right - left}px;`"></div>
    <div class="u-slider-handle" ref="left" @mousedown="onLeftMouseDown" :style="`left: ${left}px; right: auto; transform: translateX(-50%);`"></div>
    <div class="u-slider-handle" ref="right" @mousedown="onRightMouseDown" :style="`left: ${right}px; right: auto; transform: translateX(-50%);`"></div>
  </div>
</template>
<script>
export default {
  name: 'Slider',
  props: {
    min: { // 滑动输入条最小值
      type: Number,
      default: 0
    },
    max: { // 滑动输入条最大值
      type: Number,
      default: 100
    },
    initialMin: { // 滑动输入条初始最小值,默认在最左侧
      type: Number,
      default: 0
    },
    initialMax: { // 滑动输入条初始最大值,默认在最右侧
      type: Number,
      default: 100
    }
  },
  data () {
    return {
      left: '', // 左滑块距离滑动条左端的距离
      right: '', // 右滑动距离滑动条左端的距离
      width: '' // 滑动输入条在页面中的宽度
    }
  },
  mounted () {
    this.width = this.$refs.slider.clientWidth
    this.left = this.initialMin * this.width / this.max
    this.right = this.initialMax * this.width / this.max
  },
  computed: {
    low () {
      return Math.round(this.left / this.width * this.max)
    },
    high () {
      return Math.round(this.right / this.width * this.max)
    }
  },
  watch: {
    low (to, from) {
      this.$emit('lowChange', to) // 左滑块对应数字回调
    },
    high (to, from) {
      this.$emit('highChange', to) // 右滑块对应数字回调
    }
  },
  methods: {
    onClickPoint (e) { // 点击滑动条,移动滑块
      var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
      var moveX = e.clientX - offsetLeft
      if (moveX <= this.left) {
        this.left = moveX
      } else if (this.moveX >= this.right) {
        this.right = this.moveX
      } else {
        if ((moveX - this.left) < (this.right - moveX)) {
          this.left = moveX
        } else {
          this.right = moveX
        }
      }
    },
    onLeftMouseDown (e) { // 在滚动条上拖动左滑块
      // 滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX - this.$refs.left.offsetLeft
      var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
      document.onmousemove = (e) => {
        var moveX = e.clientX - offsetLeft
        if (moveX < 0) {
          this.left = 0
        } else if (moveX >= this.right) {
          this.left = this.right
        } else {
          this.left = moveX
        }
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    onRightMouseDown (e) { // 在滚动条上拖动右滑块
      /// 滑块水平方向上距离屏幕左端的距离,减去滑块距离滑动条最左端的距离:e.clientX - this.$refs.left.offsetLeft
      var offsetLeft = this.$refs.slider.offsetLeft // 滑动条左端距离屏幕左侧的距离
      console.log('offsetLeft:', offsetLeft)
      document.onmousemove = (e) => {
        var moveX = e.clientX - offsetLeft
        if (moveX > this.width) {
          this.right = this.width
        } else if (moveX <= this.left) {
          this.right = this.left
        } else {
          this.right = moveX
        }
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}
</script>
<style lang="less" scoped>
.m-slider {
  height: 4px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  &:hover {
    .u-slider-rail { // 灰色未选择滑动条背景色
      background: #E3E3E3;
    }
    .u-slider-track { // 蓝色已选择滑动条背景色
      background: #1890ff;
    }
  }
  .u-slider-rail { // 灰色未选择滑动条背景色
    position: absolute;
    z-index: 99;
    height: 4px;
    width: 100%;
    background: #f5f5f5;
    border-radius: 2px;
    transition: background .3s;
  }
  .u-slider-track { // 蓝色已选择滑动条背景色
    background: #91d5ff;
    border-radius: 4px;
    position: absolute;
    z-index: 99;
    height: 4px;
    cursor: pointer;
    transition: background .3s;
  }
  .u-slider-handle { // 滑块
    position: absolute;
    z-index: 999;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    box-shadow: 0;
    background: #fff;
    border: 2px solid #91d5ff;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color .3s,box-shadow .6s,transform .3s cubic-bezier(.18,.89,.32,1.28);
    &:hover {
      border-color: #1890ff;
    }
  }
}
</style>

②在要使用的页面引入

<div class="m-num">
    <p class="u-num">{{ low }}</p>
    <p class="u-num">{{ high }}</p>
</div>
<div class="slider">
    <Slider
        :min="0"
        :max="100"
        :initialMin="low"
        :initialMax="high"
        @lowChange="lowChange"
        @highChange="highChange"
    />
</div>
import Slider from '@/components/Slider'
components: {
    Slider
}
data () {
    return {
        low: 20,
        high: 80
    }
}
lowChange (val) {
      this.low = val
      console.log('lowChange:', val)
},
highChange (val) {
      this.high = val
      console.log('highChange:', val)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue2.0+webpack环境的构造过程

    vue2.0+webpack环境的构造过程

    本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • vue.js获取数据库数据实例代码

    vue.js获取数据库数据实例代码

    本篇文章主要介绍了vue.js获取数据库数据实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • elementui之封装下载模板和导入文件组件方式

    elementui之封装下载模板和导入文件组件方式

    这篇文章主要介绍了关于elementui之封装下载模板和导入文件组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue reactive函数实现流程详解

    Vue reactive函数实现流程详解

    一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数,这篇文章主要介绍了Vue reactive函数
    2023-01-01
  • Vue中@click.native的使用方法及场景

    Vue中@click.native的使用方法及场景

    在组件中时常看到@click.native,在项目中遇到后,简单介绍下,这篇文章主要给大家介绍了关于Vue中@click.native的使用方法及场景的相关资料,需要的朋友可以参考下
    2023-11-11
  • Vue获取表单数据的多种方式

    Vue获取表单数据的多种方式

    这篇文章主要给大家介绍了关于Vue获取表单数据的多种方式,在Vue中我们通常使用v-model命令绑定表单的属性值(通常是value),获取到的属性值就是表单数据,需要的朋友可以参考下
    2023-09-09
  • 使用van-picker 动态设置当前选中项

    使用van-picker 动态设置当前选中项

    这篇文章主要介绍了使用van-picker 动态设置当前选中项方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue tailwindcss安装配置教程示例详解

    vue tailwindcss安装配置教程示例详解

    这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • element 时间选择器禁用选择的使用示例

    element 时间选择器禁用选择的使用示例

    最近做项目遇到的一个功能,禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期,本文主要介绍了element 时间选择器禁用选择的使用示例,感兴趣的可以了解一下
    2023-09-09
  • vue路由跳转了但界面不显示的问题及解决

    vue路由跳转了但界面不显示的问题及解决

    这篇文章主要介绍了vue路由跳转了但界面不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论