快捷導(dǎo)航

基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器

更新時間：2024年02月28日 12:09:52 作者：毛三仙

這篇文章主要介紹了基于el-slider實現(xiàn)一個能拖動的時間范圍選擇器,并通過實例代碼介紹了基于element-ui el-slider實現(xiàn)滑動限位器的方法,需要的朋友可以參考下

el-slider實現(xiàn)一個能拖動的時間范圍選擇器

<template>
  <div style="width: 200px">
    <el-slider
      v-model="workTime"
      :step="5"
      :max="1435"
      :marks="marks"
      :format-tooltip="formatTime"
      @input="getTime"
    >
    </el-slider>
  </div>
</template>
<script>
export default {
  name: 'aaa',
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      workTime: 0,
      marks: {
        0: '00:00',
        720: {
          style: {
            color: '#1989FA'
          },
          label: '12:00'
        },
        1435: {
          label: this.$createElement('strong', '23:55')
        }
      },
    }
  },
  methods: {
    /**
     * @Event 分鐘轉(zhuǎn)成時間(如：06:05)
     * params: val(分鐘)
     * @author: mhf
     * @time: 2024-01-31 14:17:54
     **/
    formatTime(val) {
      const hour = Math.floor(val / 60).toString().padStart(2, '0');
      const min = (val % 60).toString().padStart(2, '0');
      console.log(`${hour}:${min}`)
      return `${hour}:${min}`;
    },
    getTime(e) {
      this.formatTime(e)
    }
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>
<style lang="scss" scoped></style>

補充：

基于element-ui el-slider實現(xiàn)滑動限位器

應(yīng)需求需要，要做一個滑動限位器，一通百度，一通谷歌，沒有相對應(yīng)的解決方案，所以只能自己上。過程有丟丟曲折，比較細(xì)的東西。所以耗時也長寫。寫出來有需要的可以參考

需求圖如下：

上面的滑塊是可以在區(qū)間【50-100】之間隨意切換的。左邊和右邊也是可以隨意拉動，區(qū)間可以隨意變動，上面的滑塊也可以跟著區(qū)間的范圍不停的在變動。當(dāng)然，也是有限制的，我這邊的限制是30-150。

需求拿到手，那就是開始開工了。

看了看element-ui沒有現(xiàn)成的，只能自己用css組合啦。

廢話就少說了，上代碼

html模塊

<div class="fov">
            <div class="all_slider">
              <div class="assist_mian">
                <div class="rel_slider" :style="{'left':moveWidata.left+'%','right':moveWidata.right+'%'}">
                  <el-slider
                    v-model="currentFov"
                    class="point"
                    :min="fovWid[0]"
                    :max="fovWid[1]"
                    @input="setNoFovUnityData()"
                    @change="getFovAngle()"
                  />
                </div>
              </div>
              <el-slider
                v-model="fovValue"
                class="slider_line"
                range
                :marks="marks"
                :min="30"
                :max="150"
                @change="getFovData()"
              />
            </div>
            <div class="show_slider">
              <div class="each_inp spe_left">
                <el-input
                  v-model="fovMin"
                  :min="Number(30)"
                  :max="Number(150)"
                  onkeyup="value=value.replace(/[^\d]/g,'')"
                  type="text"
                  class="input"
                  @change="getFovMin()"
                />
                <div class="text">最近</div>
              </div>
              <div class="each_inp spe_right">
                <div class="p_right">
                  <el-input
                    v-model="fovMax"
                    :min="Number(30)"
                    :max="Number(150)"
                    onkeyup="value=value.replace(/[^\d]/g,'')"
                    type="text"
                    class="input"
                    @change="getFovMax()"
                  />
                  <div class="text">最遠(yuǎn)</div>
                </div>
              </div>
            </div>
          </div>

css模塊代碼如下：

<style lang="scss" scoped>
  .assist_mian {
    width: 100%;
    padding: 0 20px;
    position: relative;
    height: 1px;
  }
  .set_title {
    padding-top: 20px;
    color: #333333;
  }
  .fov {
    padding: 8px 20px 0;
    position: relative;
    overflow: hidden;
  }
  .spe_title {
    display: flex;
  }
  .set_sum {
    flex: 1;
    padding-top: 20px;
    text-align: right;
    color: #999;
    font-size: 12px;
  }
  .number {
    color: #333333;
  }
  .show_slider {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .each_inp {
    flex: 1;
  }
  .spe_left {
    margin-left: -20px;
  }
  .spe_right {
    position: relative;
    margin-right: -20px;
  }
  .input {
    display: block;
    width: 50px;
    height: 30px;
    margin-top: 8px;
    background: #F4F4F4;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid #E9E9E9;
    text-align: center;
    color: #333;
    font-size: 12px;
  }
  .text {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #666666;
    text-align: center;
  }
  .p_right {
    position: absolute;
    right: 0;
  }
  .rel_slider {
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
  }
  .input {
    ::v-deep .el-input__inner {
      font-size: 14px !important;
      color: #000000 !important;
      padding: 0;
      height: 30px;
      border: none;
      text-align: center;
    }
  }
</style>
<style lang="scss">
  .point {
    .el-slider__button {
      background: url(../../../assets/cam/icon.png) no-repeat;
      border: none;
    }
    .el-slider__runway {
      margin: 0;
      background: transparent;
    }
    .el-slider__bar {
      background: transparent;
    }
  }
  .slider_line {
    .el-slider__runway {
      margin: 10px 0 16px 0;
    }
    .el-slider__bar {
      background-color: #001B84;
    }
    .el-slider__button {
      border: 2px solid #001B84;
    }
    .el-slider__stop {
      background: transparent;
    }
  }
  .all_slider {
    position: relative;
    // padding: 0 20px;
    top: 8px;
    .el-slider__marks-text {
      color: #000;
    }
  }
</style>

樣式搞定，就到了js啦。畢竟要動態(tài)變化呀。代碼如下：

<script>
export default {
  data() {
    return {
      currentFov: 55, // 得到當(dāng)前值
      fovValue: [50, 100],
      eachWid: (120 / 100), // 得到滑條每個位置的長度，廣角
      moveWidata: { left: 0, right: 0 }, // 廣角垂直視角選擇
      fovWid: [60, 80], // 得到廣角滑塊得區(qū)域
      marks: { // 得到fov限制
        '30': '30',
        '90': '90',
        '150': '150'
      },
      fovMin: 0, // fov的最小值,input框的
      fovMax: 0,
    }
  },
  created() {
    this.getFovData() //初始化一下長度
  },
  methods: {
    // 得到fov的最小值
    getFovMin(e) {
      this.getFovRange(1, 30, 150)
    },
    // 得到fov的最大值
    getFovMax() {
      this.getFovRange(2, 30, 150)
    },
    /**
     * 得到視角fov的數(shù)據(jù)
     * type是最近還是最遠(yuǎn)
     *min 最小值
     *max 最大值
     */
    getFovRange(type, min, max) {
      if (type === 1) {
        if (+this.fovMin < min) { // 最小值輸入小于最小應(yīng)輸入的則賦值最新值
          this.fovMin = min
          this.fovValue = [min, this.fovValue[1]]
        } else {
          this.fovValue = [+this.fovMin, this.fovValue[1]]
        }
      } else {
        if (this.fovMax > max) {
          this.fovMax = max
          this.fovValue = [this.fovValue[0], max]
        } else {
          this.fovValue = [this.fovValue[0], +this.fovMax]
        }
      }
      this.getFovData(true)
    },
    /**
     * 計算上面當(dāng)前滑塊的長度
     * fov視角得初始化設(shè)置
     */
    getFovData(isUnityData = false) {
      if (this.fovMin !== this.fovValue[0]) { 
        this.fovMin = this.fovValue[0]
        const wleft = (this.fovValue[0] - 30) / this.eachWid
        this.moveWidata.left = wleft
      }
      if (this.fovMax !== this.fovValue[1]) { 
        this.fovMax = this.fovValue[1]
        const wright = (150 - this.fovValue[1]) / this.eachWid
        this.moveWidata.right = wright
      }
      this.fovWid = this.fovValue
    }
  }
}
</script>

以上就是相關(guān)代碼啦。

圖標(biāo)記得改，.point .el-slider__button的backgroud，

需要的自己復(fù)制粘貼吧?？梢詤⒖家部梢宰约悍庋b，因為我的業(yè)務(wù)原因。不能封裝，分開是更好的選擇，所以就沒有封裝，實在需要就自己封裝。本小禿頭就不操這心了。下一篇見。啦啦啦。

到此這篇關(guān)于el-slider實現(xiàn)一個能拖動的時間范圍選擇器的文章就介紹到這了,更多相關(guān)el-slider時間范圍選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: