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

before

一开始用的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 --save

import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default.css';
1
2
3
4

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

step2：禁用第二个滑块

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

<template>
  <div>
    <vue-slider v-model="value1" :disabled="true"></vue-slider>
    <vue-slider
      v-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

step3：（隐藏第二个滑块）

::v-deep .vue-slider-dot-disabled {
  background: transparent;
  pointer-events: none;
}
::v-deep .vue-slider-dot-handle-disabled {
  cursor: auto;
}
1
2
3
4
5
6
7

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

完整代码

<template>
  <div class="mSlider">
    <div class="slider">
      <vue-slider
        v-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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

绝不会超过设定值，使用键盘左右键也不会超过，点图标又回到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;
      }
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23