elementUI slider组件,带范围选择实现双向绑定

网上查过很多相关文章都没有一章是写element ui滑块带范围实现双向绑定 二个滑块二头的数据怎么得到 我的需求是做个时间轴要滑动选择不同的时间 开始很难做最后一点一点摸索得出的结论 好在写出来了先给大家看实体图

就是这样的 给大家贴代码 多余的代码我就不贴了 就给你们看主要的

 <div>
      <el-dialog
        title="聊天记录"
        :visible.sync="showFlag"
        width="850px"
        @close="closeDialog"
        center
      >
        <div>
          <div class="block">
            <el-slider
              v-model="value"
              range
              :marks="marks"
              :max="300"
              :step="1"
              @change="schedule()"
              style="margin-bottom:10px;"
              :format-tooltip="formatTooltip"
            >
            </el-slider>
          </div>
        </div>
      </el-dialog>
    </div>

<el-button size="mini" @click="showChart(scope)">查看聊天记录</el-button>

再是函数方法里面的

这是点击按钮进入聊天弹框触发的函数
  showChart(scope) {
      this.value = [120, 140]
      this.liveIdRow = scope.row.LiveID
      this.TeacherIDRow = scope.row.TeacherID
      this.searchValue.time = []
      this.data = []
      if (scope) {
        var startTime = scope.row.StartTime
        var endTime = moment(startTime)
          .add(20, 'm')
          .format('YYYY-MM-DD HH:mm:ss')
        this.searchValue.time.push(startTime)
        this.searchValue.time.push(endTime)
        this.focusTimeList = []
        for (var i = 0; i < 7; i++) {
          this.focusTimeList.push(
            moment(startTime)
              .add(60 * i, 'm')
              .format('YYYY-MM-DD HH:mm:ss')
          )
        }
        this.focusTimeListTwo = []
        for (var k = 0; k < 3; k++) {
          this.focusTimeListTwo.push(
            moment(this.focusTimeList[0])
              .add(-60 * k, 'm')
              .format('YYYY-MM-DD HH:mm:ss')
          )
        }
      }
      this.loading = true
      this.showFlag = true
      this.recordList = []
      var body = {
        liveid: this.liveIdRow,
        teacherid: this.TeacherIDRow,
        start: this.searchValue.time[0],
        end: this.searchValue.time[1]
      }
      return request({
        method: 'get',
        url: '/api/teacher/chat',
        params: body
      }).then(res => {
        if (res.Content) {
          this.messages = res.Content
          this.messages.forEach(item => {
            var num = parseInt(19 * Math.random())
            item.img = require(`../../../assets/auter/icon-test_${num}.png`)
            item.msgs = item.msg
              .replace(/\[e\]em_/g, '<img src=../../../static/faces/em_')
              .replace(/\[e\]/g, '.png>')
          })
          this.recordList = this.messages
          this.loading = false
        } else {
          this.$message({
            message: '无分析结果!',
            type: 'warning'
          })
          this.loading = false
        }
      })
    },
这是滑块自带的函数你可以去elementui官网看一下了解一下大概就是你滑动一下滑块每次都触发的函数
 formatTooltip(val) {
      this.val = val
      this.marks = {
        0: this.focusTimeListTwo[2].substring(11, 19),
        60: this.focusTimeListTwo[1].substring(11, 19),
        120: this.focusTimeList[0].substring(11, 19),
        180: this.focusTimeList[1].substring(11, 19),
        240: this.focusTimeList[2].substring(11, 19),
        300: this.focusTimeList[3].substring(11, 19)
      }
      if (val != null) {
        var hour = this.focusTimeListTwo[2].substring(11, 13)
        var min = this.focusTimeListTwo[2].substring(14, 16)
        if (val < 60 || val == 60) {
          min = min * 1 + val
          if (min == 60) {
            min = 0
            hour = this.focusTimeListTwo[1].substring(11, 13) * 1
          }
          hour = hour * 1
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if ((val > 60 && val < 120) || val == 120) {
          min = this.focusTimeListTwo[1].substring(14, 16) * 1
          hour = this.focusTimeListTwo[1].substring(11, 13) * 1
          min = min * 1 + val - 60
          if (min == 60) {
            min = 0
            hour = this.focusTimeList[0].substring(11, 13) * 1
          }
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if ((val > 120 && val < 180) || val == 120) {
          min = this.focusTimeList[0].substring(14, 16) * 1
          min = min * 1 + val - 120
          hour = this.focusTimeList[0].substring(11, 13) * 1
          if (min == 60) {
            min = 0
            hour = this.focusTimeList[1].substring(11, 13) * 1
          }
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if ((val > 180 && val < 240) || val == 180) {
          min = this.focusTimeList[1].substring(14, 16) * 1
          min = min * 1 + val - 180
          hour = this.focusTimeList[1].substring(11, 13) * 1
          if (min == 60) {
            min = 0
            hour = this.focusTimeList[2].substring(11, 13) * 1
          }
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if ((val > 240 && val < 300) || val == 240) {
          min = this.focusTimeList[2].substring(14, 16) * 1
          min = min * 1 + val - 240
          hour = this.focusTimeList[2].substring(11, 13) * 1
          if (min == 60) {
            min = 0
            hour = this.focusTimeList[3].substring(11, 13) * 1
          }
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if (val == 300) {
          min = this.focusTimeList[3].substring(14, 16) * 1
          min = min * 1 + val - 300
          hour = this.focusTimeList[3].substring(11, 13) * 1
          if (min > 60) {
            min = min - 60
            hour = hour + 1
          }
        }
        if (hour < 10) {
          hour = '0' + hour
        }
        if (min < 10) {
          min = '0' + min
        }
        this.hour = hour
        this.min = min
        const time = hour + ':' + min
        return time
      } else {
        hour = 0
        min = 0
        hour = this.focusTimeList[0].substring(11, 13)
        min = this.focusTimeList[0].substring(14, 16)
        const time = hour + ':' + min
        return time
      }
    },
下面也是elementui自带函数大概意思就是你拖动划款松开鼠标触发的
schedule() {
      this.searchValue.time = []
      const start = this.focusTimeList[0]
      const daydata = this.focusTimeListTwo[1].substring(0, 10)
      const end = daydata + ' ' + this.hour + ':' + this.min + ':' + '00'
      this.timer = daydata + ' ' + this.hour + ':' + this.min + ':' + '00'
      this.searchValue.time.push(start)
      this.searchValue.time.push(end)
      this.loading = true
      this.showFlag = true
      this.recordList = []
      if (this.valNew > this.valOld) {
        var body = {
          liveid: this.liveIdRow,
          teacherid: this.TeacherIDRow,
          start: this.searchValue.time[0],
          end: this.searchValue.time[1]
        }
        return request({
          method: 'get',
          url: '/api/teacher/chat',
          params: body
        }).then(res => {
          if (res.Content) {
            this.messages = res.Content
            this.messages.forEach(item => {
              var num = parseInt(19 * Math.random())
              item.img = require(`../../../assets/auter/icon-test_${num}.png`)
              item.msgs = item.msg
                .replace(/\[e\]em_/g, '<img src=../../../static/faces/em_')
                .replace(/\[e\]/g, '.png>')
            })
            this.recordList = this.messages
            this.loading = false
          } else {
            this.$message({
              message: '无分析结果!',
              type: 'warning'
            })
            this.loading = false
          }
        })
      }
      this.$nextTick(() => {
        if (this.valNew < this.valOld) {
          this.searchValue.time = []
          this.searchValue.time[0] = this.datanewVI
          this.searchValue.time[1] = this.dataoldVI
          this.loading = true
          this.showFlag = true
          this.recordList = []
          console.log(this.searchValue.time, 'watch')
          const body = {
            liveid: this.liveIdRow,
            teacherid: this.TeacherIDRow,
            start: this.searchValue.time[0],
            end: this.searchValue.time[1]
          }
          return request({
            method: 'get',
            url: '/api/teacher/chat',
            params: body
          }).then(res => {
            if (res.Content) {
              this.messages = res.Content
              this.messages.forEach(item => {
                var num = parseInt(19 * Math.random())
                item.img = require(`../../../assets/auter/icon-test_${num}.png`)
                item.msgs = item.msg
                  .replace(/\[e\]em_/g, '<img src=../../../static/faces/em_')
                  .replace(/\[e\]/g, '.png>')
              })
              this.recordList = this.messages
              this.loading = false
            } else {
              this.$message({
                message: '无分析结果!',
                type: 'warning'
              })
              this.loading = false
            }
          })
        }
      })
    },
这个是计算函数 大概作用就是深拷贝
,
  computed: {
    datainit: function() {
      var obj = {}
      obj = JSON.parse(JSON.stringify(this.searchValue.time))
      return obj
    }
  },
下面是监听函数  这就不用多说了  大家都懂监听
  watch: {
    datainit(newV, oldV) {
      this.datanewV = newV[0]
      this.datanewVI = newV[1]
      this.dataoldV = oldV[0]
      this.dataoldVI = oldV[1]
      console.log(newV, 'newV,oldV', oldV)
    },
    val(newV, oldV) {
      this.valNew = newV
      this.valOld = oldV
    }
  },

贴代码是方便你们copy  下面就是带图讲解

完成上面这些你就可以随便滑动得到时间显示时间了

其实这个都很简单主要是取值问题是往后滑动没问题 怎么都能去取到值 就是往前拖动我怎么都拿不到前面的值  最后我想了办法把时间存起来深拷贝一下 再进行监听和新旧元素对比 这样就可以完美得到值了

这是刚开始进来

这是往前

这是往后

最后回去发现一开始进去就往左滑动会有bug进行改动改了就判断的地方

改成小于120还有大于120 这样就可以 但是bug还是有我服了   只能一开始进来右边滑块只能往右滑动 左边滑块只能往左滑动才能得到正确数据  一开始右边滑块往左移动和一开始进来左边滑块往右移动都拿不到正确数据 我枯了  求大神carry

3月31改动

终于经过我不懈努力 终于完美实现滑块怎么动都可以拿到值 我也是无意之中想到的  在元素上绑定ref利用ref来得到数值 特别特别的方便

给大家看改过的代码 只改动这里就够了之前写了太多多余的代码了

schedule() {
      this.searchValue.time = []
      const start = this.focusTimeList[0]
      const daydata = this.focusTimeListTwo[1].substring(0, 10)
      const end = daydata + ' ' + this.hour + ':' + this.min + ':' + '00'
      this.searchValue.time.push(start)
      this.searchValue.time.push(end)
      this.loading = true
      this.showFlag = true
      this.recordList = []
      this.$nextTick(() => {
        this.searchValue.time = []
        this.searchValue.time[0] = this.$refs.sliders.$children[0].formatValue
        this.searchValue.time[1] = this.$refs.sliders.$children[1].formatValue
        this.loading = true
        this.showFlag = true
        this.recordList = []
        const body = {
          liveid: this.liveIdRow,
          teacherid: this.TeacherIDRow,
          start: this.searchValue.time[0],
          end: this.searchValue.time[1]
        }
        return request({
          method: 'get',
          url: '/api/teacher/chat',
          params: body
        }).then(res => {
          if (res.Content) {
            this.messages = res.Content
            this.messages.forEach(item => {
              var num = parseInt(19 * Math.random())
              item.img = require(`../../../assets/auter/icon-test_${num}.png`)
              item.msgs = item.msg
                .replace(/\[e\]em_/g, '<img src=../../../static/faces/em_')
                .replace(/\[e\]/g, '.png>')
            })
            this.recordList = this.messages
            this.loading = false
          } else {
            this.$message({
              message: '无分析结果!',
              type: 'warning'
            })
            this.loading = false
          }
        })
      })
    },

终于大功告成了

感谢大家 要觉得不错右侧打赏一下把