<template>
<div class="sliderBox">
<div class="slider-container theme-green" ref="sliderBar" :style="{width:sliderWidth+'px'}">
<div class="back-bar">
<div v-for="(item,index) in barList" :key="index" @mousedown="drag(index)">
<div class="pointer" :style="{left:item.left+'px',zIndex:item.zIndex}"></div>
<div :class="`colorBar${index}`" class="color" :style="{width:item.width+'px',left:barList[index].wLeft + 'px'}"></div>
<div class="pointer-label" :style="{left:item.left+'px'}">
<div class="content">{{showList[index]}}</div>
<div class="arrow"></div>
</div>
</div>
</div>
</div>
<b-btn class="btn" variant="primary" @click="range" style="width:70px">查询</b-btn>
</div>
</template>
<script>
export default {
name: 'ScrollBar',
data () {
return {
sumlist: [0, 0.1, 0.3, 0.5, 1, 2, 3, 5, 7, 10, 15, 20, 25, 30, 40, 50, 60, 80, 100, 120, 140, 160, 180, 200,
250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1500, 2000, 5000, 10000],
showList: ['2万', '15万', '50万', '140万', '300万', '600万', '1500万', '10000万'],
sliderWidth: 787, // bar的宽度14px 20px为一个分割
zIndex: 2,
bar: 14, // bar的宽度14px
singleRange: 20, // 单个区间的宽度
standardData: [5, 10, 15, 20, 25, 30, 35, 38], // 传值给后台的数据 20px 为1
barList: [{
left: 93,
width: 93,
wLeft: 0,
zIndex: 2
},
{
left: 193,
width: 100,
wLeft: 93,
zIndex: 2
},
{
left: 293,
width: 100,
wLeft: 193,
zIndex: 2
},
{
left: 393,
width: 100,
wLeft: 293,
zIndex: 2
},
{
left: 493,
width: 100,
wLeft: 393,
zIndex: 2
},
{
left: 593,
width: 100,
wLeft: 493,
zIndex: 2
},
{
left: 693,
width: 100,
wLeft: 593,
zIndex: 2
},
{
left: 753,
width: 60,
wLeft: 693,
zIndex: 2
}]
}
},
methods: {
drag (index) {
document.onmousemove = (e) => {
e.preventDefault()
let left = this.$refs.sliderBar.offsetLeft
let hideFlag = document.getElementById('x-side-menu').className.indexOf('hide')
if (hideFlag > -1) {
left = this.$refs.sliderBar.offsetLeft + 54
} else {
left = this.$refs.sliderBar.offsetLeft + 214
}
let position = e.clientX - left
let leftRange = this.bar / 2 // bar居中放
let minWidth = this.singleRange - this.bar / 2
let maxWidth = this.sliderWidth - this.singleRange - leftRange // 最后两格居中
this.barList[index].left = position - leftRange
if (index === 0) {
if (position <= 20) {
this.barList[index].left = minWidth // bar为14 一个区间是20，bar正好在中间 所以 20 - 7
this.barList[index].width = minWidth
position = minWidth
}
if (this.barList[index].left >= this.barList[index + 1].left) {
this.barList[index].left = this.barList[index + 1].left
this.barList[index].width = this.barList[index].left
position = this.barList[index].left + leftRange
}
this.barList[index].width = left
this.barList[index + 1].wLeft = this.barList[index].left
this.barList[index + 1].width = this.barList[index + 1].left - this.barList[index].left
} else if (index === 7) {
if (position >= maxWidth) {
this.barList[index].left = maxWidth
this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
this.barList[index].wLeft = this.barList[index - 1].left
position = maxWidth
}
if (this.barList[index].left <= this.barList[index - 1].left) {
this.barList[index].left = this.barList[index - 1].left
this.barList[index].width = 0
this.barList[index].wLeft = this.barList[index - 1].left
position = this.barList[index].left + leftRange
}
this.barList[index].wLeft = this.barList[index - 1].left
this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
} else {
this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
if (this.barList[index].left <= this.barList[index - 1].left) {
this.barList[index].left = this.barList[index - 1].left
position = this.barList[index].left + leftRange
}
if (this.barList[index].left >= this.barList[index + 1].left) {
this.barList[index].left = this.barList[index + 1].left
position = this.barList[index].left + leftRange
}
this.barList[index].wLeft = this.barList[index - 1].left
this.barList[index].width = this.barList[index].left - this.barList[index - 1].left
this.barList[index + 1].wLeft = this.barList[index].left
this.barList[index + 1].width = this.barList[index + 1].left - this.barList[index].left
}
this.standardData[index] = parseInt((position + leftRange) / this.singleRange)
this.showList[index] = this.sumlist[this.standardData[index]] + '万'
}
document.onmousedown = () => {
this.barList[index].zIndex = this.zIndex++
}
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
}
},
range () {
let range = Array.from(new Set(this.standardData))
this.$emit('rangeValue', range) // 向页面传值
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.sliderBox .btn {
margin-left: 20px;
float:left;
}
.slider-container {
height:46px;
float:left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
}
.slider-container .back-bar {
height: 12px;
margin-top:15px;
position: relative;
background:#57ee7a;
border-radius: 5px;
/* background: -webkit-linear-gradient(left, #e8fded ,#4fda6f);
background: -o-linear-gradient(right, #e8fded, #4fda6f);
background: -moz-linear-gradient(right, #e8fded, #4fda6f);
background: linear-gradient(to right, #e8fded , #4fda6f) */
}
.slider-container .back-bar .pointer {
position: absolute;
cursor:pointer;
opacity: 1;
z-index: 2;
width: 14px;
height: 32px;
top: -8px;
border-radius:30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #328cff;
}
.slider-container .back-bar .pointer-label {
position: absolute;
top: -40px;
height:32px;
}
.slider-container .back-bar .color{
height:12px;
position:absolute
}
.slider-container .back-bar .colorBar0{
border-radius:5px 0 0 5px;
background:#e8fded
}
.slider-container .back-bar .colorBar1{
background:#dcfae4
}
.slider-container .back-bar .colorBar2{
background:#cdf6d7
}
.slider-container .back-bar .colorBar3{
background:#b9f2c6
}
.slider-container .back-bar .colorBar4{
background:#a6eeb6
}
.slider-container .back-bar .colorBar5{
background:#72e28c
}
.slider-container .back-bar .colorBar6{
background:#6ae084
}
.slider-container .back-bar .colorBar7{
background:#4fe071;
}
.slider-container .back-bar .content{
line-height: 22px;
padding: 0 10px;
color: #666;
background: #e7e8ec;
overflow: hidden;
text-align: center;
white-space: nowrap;
font-size: 14px;
position: absolute;
left:8px;
transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
z-index: 1;
}
.slider-container .back-bar .arrow{
width: 0;
height: 0;
line-height: 0;
bottom:-6px;
border:8px solid #e7e8ec;
border-color: #e7e8ec transparent transparent transparent;
position: absolute;
z-index: 2;
}
.slider-container .back-bar .focused {
z-index: 10;
}
.slider-container .clickable-dummy {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.slider-container .scale {
top: 2px;
position: relative;
}
.slider-container .scale span {
position: absolute;
height: 5px;
border-left: 1px solid #999;
font-size: 0;
}
.slider-container .scale ins {
font-size: 9px;
text-decoration: none;
position: absolute;
left:-5px;
top: 8px;
color: #999;
line-height: 1;
}
.slider-container.slider-readonly .clickable-dummy,
.slider-container.slider-readonly .pointer {
cursor: auto;
}
.theme-green .back-bar .pointer-label {
color: #999;
}
.theme-green .back-bar .focused {
color: #333;
}
.theme-green .scale span {
border-left: 1px solid #e5e5e5;
}
.theme-green .scale ins {
color: #999;
}
</style>
vue多滚轴
猜你喜欢
转载自blog.csdn.net/zhaofeiweb/article/details/81909253
今日推荐
周排行