vue基于element的区间选择组件

下面就给你讲解一下“vue基于element的区间选择组件”的完整攻略。

1. 确定组件需求

首先，需要确定要实现的组件的需求，即该区间选择组件应该有哪些功能。根据需求，可以确定组件至少应该有以下几个部分：

• 显示区间选择的起始和结束时间；
• 可以通过点击或拖拽的方式修改区间选择的起始和结束时间；
• 可以通过输入起始和结束时间的方式修改区间选择的起始和结束时间；
• 可以通过自定义时间格式修改显示的时间格式；
• 可以设置最大可选择的时间范围。

2. 建立组件架构

建立组件架构主要是定义组件的 props、data、computed、methods 等属性和方法，以实现组件的功能需求。这里只列出几个重要的属性和方法：

• props：

props: {
  value: Array, // 组件需要一个 value 属性，用来设置组件的默认选择范围
  disabled: Boolean, // 是否禁用该组件
  format: String, // 显示时间的格式，默认为 'yyyy-MM-dd'
  range: Array // 最大可选择范围，默认为 []
}

• data:

data () {
  return {
    // 组件内部使用的值
    startValue: null, // 区间选择的起始时间
    endValue: null, // 区间选择的结束时间
    showPopper: false, // 是否显示弹出层
    disabledStart: false, // 是否禁用起始时间
    disabledEnd: false // 是否禁用结束时间
  }
}

• computed:

computed: {
  displayStartValue () {}, // 格式化起始时间的 computed 计算属性
  displayEndValue () {} // 格式化结束时间的 computed 计算属性
}

• methods:

methods: {
  handleStartChange (val) {}, // 处理起始时间改变的方法
  handleEndChange () {}, // 处理结束时间改变的方法
  handleStartInput () {}, // 处理起始时间输入的方法
  handleEndInput () {}, // 处理结束时间输入的方法
  formatTime () {}, // 格式化时间的方法
  handleClear () {}, // 处理清空按钮点击事件的方法
  handleConfirm () {} // 处理确认按钮点击事件的方法
}

3. 实现组件中的具体功能

根据组件需求，在建立组件架构的基础上，实现组件中的具体功能，包括初始化、更新、事件处理等。这里给出两个示例说明：

示例1：实现通过点击修改区间选择的起始和结束时间

首先，在模板中添加起始和结束时间的输入框和“确认”、“清空”按钮：

<template>
  <el-input v-model="startValue" :disabled="disabledStart" @change="handleStartChange" @input="handleStartInput"></el-input>
  <el-input v-model="endValue" :disabled="disabledEnd" @change="handleEndChange" @input="handleEndInput"></el-input>
  <el-button @click="handleClear">清空</el-button>
  <el-button @click="handleConfirm">确认</el-button>
</template>

然后，在方法中实现点击日期选择器中的某个日期后，修改起始或结束时间的功能：

handleStartChange (val) {
  if (this.endValue && val > this.endValue) {
    this.$message.error('起始时间不能晚于结束时间')
    return
  }
  this.startValue = val
  this.showPopper = false
},
handleEndChange (val) {
  if (this.startValue && val < this.startValue) {
    this.$message.error('结束时间不能早于起始时间')
    return
  }
  this.endValue = val
  this.showPopper = false
}

这样，就可以通过点击日期选择器中的某个日期，修改起始或结束时间了。

示例2：实现拖拽修改区间选择的起始和结束时间

首先，在模板中添加显示区间选择的区域和起始和结束时间选择的滑块：

<template>
  <div class="range-picker">
    <div class="range" @mousedown="handleRangeMouseDown" @mouseup="handleRangeMouseUp" :style="rangeStyle">
      <div class="start" v-if="startValue" :style="startStyle" :class="{ active: draggingStart }"></div>
      <div class="end" v-if="endValue" :style="endStyle" :class="{ active: draggingEnd }"></div>
    </div>
  </div>
</template>

然后，在方法中实现拖拽修改起始或结束时间的功能：

handleRangeMouseDown (e) {
  this.draggingStart = false
  this.draggingEnd = false

  const rect = e.target.getBoundingClientRect()
  const offsetX = e.clientX - rect.left
  const rangeWidth = rect.width

  if (offsetX < rangeWidth * 0.3 && this.startValue) {
    this.draggingStart = true
  } else if (offsetX > rangeWidth * 0.7 && this.endValue) {
    this.draggingEnd = true
  }

  if (this.draggingStart || this.draggingEnd) {
    document.addEventListener('mousemove', this.handleRangeMouseMove)
    document.addEventListener('mouseup', this.handleRangeMouseUp)
  }
},
handleRangeMouseMove (e) {
  const rect = this.$refs.range.getBoundingClientRect()
  const rangeWidth = rect.width
  let offsetX = e.clientX - rect.left

  if (offsetX < 0) {
    offsetX = 0
  } else if (offsetX > rangeWidth) {
    offsetX = rangeWidth
  }

  const percent = offsetX / rangeWidth
  const time = this.start.getTime() + percent * (this.end.getTime() - this.start.getTime())

  if (this.draggingStart) {
    if (time > this.end.getTime() - this.minRange) {
      this.startValue = new Date(this.end.getTime() - this.minRange)
    } else {
      this.startValue = new Date(time)
    }
  } else if (this.draggingEnd) {
    if (time < this.start.getTime() + this.minRange) {
      this.endValue = new Date(this.start.getTime() + this.minRange)
    } else {
      this.endValue = new Date(time)
    }
  }
},
handleRangeMouseUp () {
  this.draggingStart = false
  this.draggingEnd = false
  document.removeEventListener('mousemove', this.handleRangeMouseMove)
  document.removeEventListener('mouseup', this.handleRangeMouseUp)
}

这样，就可以通过拖拽选择起始或结束时间了。

4. 结语

以上就是使用Vue基于Element制作的一个区间选择组件的完整攻略，根据实际需要可根据需求进行调整或添加。如果需要完整的代码可以访问我的Github仓库获取。