点击时间控件,选择某一天 的日期,滑动块默认显示最后的日期为选中的日期,滑块往前倒推15天。
例如,时间控件选中2020-11-16号
滑块显示最后一天时间为选中的时间,如下图
往前倒推15天的话,滑块开始时间为2020-11-02,如下图
那么每次选择时间控件的时候,我都要动态给滑块传入时间,那么怎么传入呢?话不多说,上代码。
html部分
<!-- 时间控件 -->
<el-date-picker
v-model="checkDateEnd"
value-format="timestamp"
type="date"
placeholder="请选择日期"
>
</el-date-picker>
<!-- 滑块 -->
<el-slider
v-model="setSelectDate"
:step="1"
:min="1"
:max="15"
:format-tooltip="formatTooltip"
@change="changeDate"
show-stops>
</el-slider>
js部分
export default {
data() {
return {
checkDateEnd: null, //时间控件
setSelectDate: 1,//slider滑块
setSelectTime: '',//设置的时间
},
components: { },
mounted() { },
methods: {
//滑块 自定义的格式化处理函数
//选择时间控件之后,在选择的时间上,往前倒推15天
formatTooltip (val) {
if(this.checkDateEnd != null){
let time = this.checkDateEnd
if(val !== 15){
time = time - ((15-val) * 86400000)
}
this.setSelectTime = time
let nowDate = this.dateFormat(parseInt(time));//格式化时间
return nowDate
}else{
return;
}
},
//滑块选择时间时,发起请求
changeDate(){
this.$http.post('xxxxxxxxxxxxxx', {
checkDateEnd : this.setSelectTime
}, res => {
if (res.code === 0) {
//接口请求成功之后TODO
}
})
},
//时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
dateFormat(time) {
var date = new Date(time);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
// 拼接
return year + '-' + month + '-' + day;
}
}
};
这里面比较重要的就是format-tooltip这个属性,可以改变slider的刻度标签~~~,新手小白干啥都墨迹哈哈哈哈