vue+element:利用滑塊選擇時間范圍


以0點到12點為例,可以選擇的維度為分鍾
1.引入element
2.插入滑塊組件
<el-slider
   v-model="workTime"
   range
   show-stops
   :step="1"
   :max="720"
   :marks="marks"
   :format-tooltip="formatTooltip"
>
</el-slider>
3.滑塊標記,在data中聲明
marks: {
        0: "00:00",
        480: {
          style: {
            color: "#1989FA",
          },
          label: this.$createElement("strong", "08:00"),
        },
        720: {
          style: {
            width: "36px",
          },
          label: "12:00"
        }
      },
4.format-tooltip處理提示格式
formatTooltip(val) {
      let hour = 0;
      let min = 0;
      hour = parseInt(val / 60);
      if (hour < 10) {
        hour = "0" + hour.toString();
      } else {
        hour = hour.toString();
      }
      min = val - hour * 60;
      if (min < 10) {
        min = "0" + min.toString();
      } else {
        min = min.toString();
      }
      let time = hour + ":" + min;
      console.log(time);
      return time;
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM