el-slider实现一个能拖动的时间范围选择器

最新推荐文章于 2024-03-23 09:44:59 发布

毛三仙

最新推荐文章于 2024-03-23 09:44:59 发布

阅读量661

点赞数 17

分类专栏：后台管理系统文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74149462/article/details/136328950

版权

后台管理系统专栏收录该内容

56 篇文章 2 订阅

订阅专栏

<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 分钟转成时间(如：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>