【前端】vue-slider实现可设置选择范围的时间轴

一开始用的el-slider，提了这个需求以后开始查文档改，到最后发现，element的slider居然可以样式和绑定的value不一致，会不会是需要强制重新渲染已经不关心了，换了vue-slider，看到了它的范围模式，最后实现了设置不可选范围，将时间轴分两段

vue-slider 官网范围模式： https://nightcatsama.github.io/vue-slider-component/#/zh-CN/basics/range

使用：

npm install vue-slider-component --saveimport VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';

step1：禁止滑块交叉穿越

<template><div><vue-slider v-model="value" :enable-cross="false"></vue-slider></div>
</template><script>module.exports = {components: {VueSlider},data: function () {return {value: [0, 30],}}}
</script>

step2：禁用第二个滑块

截图截不到第二个滑块上大大的 cursor: not-allowed 标志。

<template><div><vue-slider v-model="value1" :disabled="true"></vue-slider><vue-sliderv-model="value2":dot-options="dotOptions":order="false"></vue-slider></div>
</template><script>module.exports = {components: {VueSlider},data: function () {return {value1: 0,value2: [0, 50],dotOptions: [{disabled: false}, {disabled: true}]}}}
</script>

step3：（隐藏第二个滑块）

::v-deep .vue-slider-dot-disabled {background: transparent;pointer-events: none;
}
::v-deep .vue-slider-dot-handle-disabled {cursor: auto;
}

加cursor: auto; 屏蔽固定滑块的cursor:not-allowed，不显示禁止符号。
隐藏一个东西 pointer-events: none; 和 background: transparent; 就够了。

完整代码

<template><div class="mSlider"><div class="slider"><vue-sliderv-model="value2"tooltip="none":data="marks":marks="c => {return showMark(c)}"@change="sliderChange":dot-options="dotOptions":enable-cross="false":contained="true"></vue-slider><!--          --></div><div class="bk"></div><div class="c-btn"><div @click="decrease"><i class="el-icon-caret-left"></i></div><div @click="increase"><i class="el-icon-caret-right"></i></div></div></div>
</template><script>
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
import moment from 'moment';
//import from '@/api/';
export default {name: 'mSlider',components: {VueSlider,},props: {daysNum: {default: 30,type: Number,},},data() {return {marks: [],today: 21,value2: [1, 50],dotOptions: [{disabled: false,},{disabled: true,},],};},computed: {},watch: {daysNum: {handler(val) {this.marks = [];for (let i = 1; i <= this.daysNum; i++) {this.marks.push(i);}},},value2(v) {if (v[0] != 50) {this.$emit('dayChange', v[0]);}},},async created() {for (let i = 1; i <= this.daysNum; i++) {this.marks.push(i);}await this.queryLastest();},mounted() {},methods: {async queryLastest() {this.today = Number(moment().format('DD'));//如果查询失败就用当天作为最新时间try {// 查询你要的日期  当前today:不超过当天} catch (c) {console.error(c);}this.$set(this.value2, 1, this.today);this.$set(this.value2, 0, this.today);},showMark(c) {if (c == this.value2[0]) {return {label: c,labelStyle: {color: 'blue',fontSize: '1.4rem',marginTop: '-3.1rem',},};}return {label: c,labelStyle: {color: '',fontSize: '1.4rem',marginTop: '-3rem',},};},sliderChange(v) {},increase() {let t = this.value2[0] + 1;if (t <= this.today) {this.$set(this.value2, 0, t);} else {this.$set(this.value2, 0, 1);}},decrease() {let t = this.value2[0] - 1;if (t >= 1) {this.$set(this.value2, 0, t);}},},
};
</script><style lang="scss" scoped>
.mSlider {width: 91rem;height: 6.6rem;position: relative;margin-top: 3rem;display: flex;flex-direction: row;align-items: center;border: 1px solid black;margin-left: 1rem;.slider {width: 78rem;padding: 0 1rem;}.bk {width: 80rem;height: 3.4rem;//background:top: 0;position: absolute;}.c-btn {width: 7rem;height: 40%;display: flex;flex-direction: row;align-items: center;justify-content: space-evenly;margin-left: 1rem;> div {font-size: 2.4rem;//color:i {cursor: pointer;}}}
}
::v-deep .vue-slider {margin-top: 3rem;
}
::v-deep .vue-slider-mark-step {width: 1px;height: 150%;margin-top: -2px;border-radius: 0;background-color: black;//
}
::v-deep .vue-slider-process {background-color: transparent;
}
::v-deep .vue-slider-rail {background-color: black;//height: 50%;
}
::v-deep .vue-slider-dot-handle {border-radius: 0;background-color: transparent;box-shadow: none;
}
::v-deep .vue-slider-dot {// background: url('滑块.png') no-repeat center/150% 150%;// border: none;background-color: blue;
}
::v-deep .vue-slider-dot-disabled {background: transparent;pointer-events: none;
}
::v-deep .vue-slider-dot-handle-disabled {cursor: auto;
}
</style>

绝不会超过设定值，使用键盘左右键也不会超过，点图标又回到1
此处1rem=10px

父组件获得当月天数

  computed: {daysNum() {if (this.outInfoData.month == 2) {if (this.outInfoData.year % 400 == 0 ||(this.outInfoData.year % 4 == 0 && this.outInfoData.year % 100 != 0)) {return 29;} else {return 28;}} else if (this.outInfoData.month == 4 ||this.outInfoData.month == 6 ||this.outInfoData.month == 9 ||this.outInfoData.month == 11) {return 30;} else {return 31;}},},

【前端】vue-slider实现可设置选择范围的时间轴相关推荐

查看前端Vue版本命令
阅文时长 | 0.43分钟字数统计 | 689.6字符主要内容 | 1.引言&背景 2.解决方案 3.声明与参考资料『查看前端Vue版本命令』编写人 | SCscHero 编写时间 | ...
Vue时间轴（横向）
可自定义设置以下属性: 时间轴数据(timelineData),必传初始选中年份(activeYear),默认2020 效果如下图(自适应均匀排列,每个元素周围分配相同的空间<space-ar ...
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
vscode中前端vue项目详解_web前端Vue项目实战-Music
上篇讲到vue的使用方法,今天这一篇介绍vue的实操,可以大家更加加固去学习web前端vue技术. 第一节 Music项目环境第一部分本届作业聊一聊React和Vue的区别老版本的项目环境如何创 ...
最新前端vue，js，css，性能优化面试题66道题
这些是我总结的前端常会遇到的面试题,大家可以多多参考希望大家可以留下意见,我也可以吸收不足 1.js其中基本数据类型有哪些五种: undefined.null.Boolean.Number和Str ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
2022年前端Vue常见面试题大全（三万长文）持续更新
目录 1.Vue和React有什么不同?使用场景分别是什么? 2.axios是什么?怎么使用它,怎么解决跨域? 3.说说Vue,React,angularjs,jquery的区别 4.什么阶段(生命周 ...