<template>
<div class="slider_all">
<div
class="number"
>{{ showNumber+this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex].weight.minNumber }}</div>
<div class="content">
<div class="describe" style="width:270px;">
<div class="left">最小比值({{minNumber}})</div>
<div class="right">最大比值({{maxNumber}})</div>
</div>
<!-- 滑動條 -->
<div
class="slider"
id="slider"
style="width:270px;"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="mouseLeave"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
>
<div class="process" :style="{width:process+'px'}"></div>
<div class="item" :style="{left:process-10+'px'}">
<span class="center"></span>
</div>
</div>
<!-- 標記 -->
<!-- <div class="lable">
<div class="lable_item">
<span class="line"></span>
0
</div>
<div class="lable_item">
<span class="line"></span>
20
</div>
<div class="lable_item">
<span class="line"></span>
40
</div>
<div class="lable_item">
<span class="line"></span>
60
</div>
<div class="lable_item">
<span class="line"></span>
80
</div>
<div class="lable_item">
<span class="line"></span>
100
</div>
</div>-->
</div>
</div>
</template>
<script>
export default {
props: ["parentIndex", "childIndex"],
data() {
return {
//當前進度數
process: 0,
//實際顯示number
showNumber: 0,
//鼠標是否點擊
mouseIsClick: false,
//初始pageX位置
pageX: 0,
//最小比重值
minNumber: this.$store.state.surveyAnswer.surveyAnswerobj[
this.parentIndex
].weight.minNumber
? this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex]
.weight.minNumber
: 0,
//最大比重
maxNumber: this.$store.state.surveyAnswer.surveyAnswerobj[
this.parentIndex
].weight.maxNumber
? this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex]
.weight.maxNumber
: 100,
//倍數比例
proportion:
100 /
(this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex].weight
.maxNumber -
this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex]
.weight.minNumber)
};
},
computed: {
//得到權重參數
getItem() {
return this.$store.state.surveyAnswer.surveyAnswerobj[this.parentIndex];
},
getProp() {
return 100 / (this.maxNumber - this.minNumber);
}
},
watch: {
process(val) {
val = val / this.getProp;
this.showNumber =
Math.floor(val * 0.4) >= this.maxNumber - this.minNumber
? this.maxNumber - this.minNumber
: Math.floor(val * 0.4);
this.$store.commit("surveyAnswer/changeWeight", {
parentIndex: this.parentIndex,
childIndex: this.childIndex,
val: this.showNumber
});
}
},
methods: {
//觸摸開始
touchStart(e) {
console.log("滑動開始");
let tempVal = e.touches[0].pageX - 70;
if (tempVal >= 0 && tempVal <= 270) {
this.process = tempVal;
}
},
//滑動過程
touchMove(e) {
let tempVal = e.changedTouches[0].pageX - 70;
if (tempVal >= 0 && tempVal <= 270) {
console.log(tempVal);
this.process = tempVal;
}
},
//滑動結束
touchEnd(e) {
console.log("滑動結束");
let tempVal = e.changedTouches[0].pageX - 70;
if (tempVal >= 0 && tempVal <= 270) {
console.log(tempVal);
this.process = tempVal;
}
},
//鼠標結束事件
mouseLeave(e) {
console.log("鼠標結束");
this.mouseIsClick = false;
},
//PC端模擬事件
mouseDown(e) {
if (!this.mouseIsClick) {
this.mouseIsClick = true;
let tempVal = e.offsetX;
this.pageX = e.pageX-e.offsetX;
if (tempVal >= 0 && tempVal <= 270) {
this.process = tempVal;
}
}
},
//鼠標移動
mouseMove(e) {
if (this.mouseIsClick) {
let tempVal = e.pageX - this.pageX;
if (tempVal >= 0 && tempVal <= 270) {
this.process = tempVal;
}
}
}
}
};
</script>
<style lang="less" scoped>
.slider_all {
width: 667px;
display: flex;
flex-direction: row;
.number {
width: 100px;
height: 110px;
text-align: center;
line-height: 110px;
font-size: 40px;
font-family: PingFang SC;
font-weight: bold;
color: rgba(192, 65, 61, 1);
}
.content {
width: 526px;
.describe {
width: 100%;
display: flex;
flex-direction: row;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
margin-bottom: 15px;
color: rgba(51, 51, 51, 1);
.left {
}
.right {
flex: 1;
text-align: right;
}
}
// 滑塊樣式
.slider {
height: 25px;
background: rgba(89, 101, 199, 0.1);
border-radius: 12px;
position: relative;
.process {
height: 25px;
width: 50px;
border-radius: 12px;
background: rgba(89, 101, 199, 1);
position: absolute;
left: 0;
top: 0;
}
.item {
width: 45px;
height: 45px;
background: rgba(89, 101, 199, 1);
box-shadow: 0px 4px 20px 4px rgba(50, 33, 112, 0.2);
border-radius: 50%;
position: absolute;
top: -10px;
left: 35px;
.center {
width: 21px;
height: 21px;
background: rgba(255, 255, 255, 0.85);
box-shadow: 0px 4px 20px 4px rgba(50, 33, 112, 0.2);
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
}
}
// 標籤
.lable {
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: row;
.lable_item {
margin-right: 74px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: rgba(51, 51, 51, 0.5);
.line {
width: 1px;
height: 27px;
border: 1px solid rgba(51, 51, 51, 0.2);
margin-bottom: 10px;
}
}
.lable_item:last-child {
margin-right: 0;
}
}
}
}
</style>