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
          }
        })
      })
    },

 

 

 

 

 終於大功告成了

 感謝大家 要覺得不錯右側打賞一下把