提交 b7195628 编写于 作者: 2 23700113@qq.com

fix: 修复slider组件step设置为小数时精度丢失,问题:112749

上级 aec26a6c
......@@ -2,33 +2,33 @@
<uni-slider
ref="uni-slider"
v-on="$listeners"
@click="_onClick"
@click="_onClick"
>
<div class="uni-slider-wrapper">
<div class="uni-slider-tap-area">
<div
:style="setBgColor"
class="uni-slider-handle-wrapper"
class="uni-slider-handle-wrapper"
>
<div
ref="uni-slider-handle"
:style="setBlockBg"
class="uni-slider-handle"
class="uni-slider-handle"
/>
<div
:style="setBlockStyle"
class="uni-slider-thumb"
class="uni-slider-thumb"
/>
<div
:style="setActiveColor"
class="uni-slider-track"
class="uni-slider-track"
/>
</div>
</div>
<span
v-show="showValue"
v-show="showValue"
ref="uni-slider-value"
class="uni-slider-value"
class="uni-slider-value"
>{{ sliderValue }}</span>
</div>
<slot />
......@@ -40,6 +40,78 @@ import {
listeners
} from 'uni-mixins'
import touchtrack from 'uni-mixins/touchtrack'
// 处理js计算小数时的精度问题
var computeController = {
add: function (arg) {
var r1, r2, m
try {
// 获得小数位数
r1 = this.toString().split('.')[1].length
} catch (e) {
r1 = 0
}
try {
// 获得小数位数
r2 = arg.toString().split('.')[1].length
} catch (e) {
r2 = 0
}
m = Math.pow(10, Math.max(r1, r2))
return (this * m + arg * m) / m
},
sub: function (arg) {
return this.add(-arg)
},
mul: function (arg) {
var m = 0; var s1 = this.toString(); var s2 = arg.toString()
try {
// 获得小数位数
m += s1.split('.')[1].length
} catch (e) { }
try {
// 获得小数位数
m += s2.split('.')[1].length
} catch (e) { }
// 转为十进制计算后,要除以两个数的共同小数位数
return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
},
div: function (arg) {
var t1 = 0; var t2 = 0; var r1; var r2
try {
// 获得小数位数
t1 = this.toString().split('.')[1].length
} catch (e) { }
try {
// 获得小数位数
t2 = arg.toString().split('.')[1].length
} catch (e) { }
r1 = Number(this.toString().replace('.', ''))
r2 = Number(arg.toString().replace('.', ''))
// 转为十进制计算后,要乘以除数与被除数小数位数的差
return (r1 / r2) * Math.pow(10, t2 - t1)
},
mod: function (arg) {
var t1 = 0; var t2 = 0; var r1; var r2
try {
t1 = this.toString().split('.')[1].length
} catch (e) { }
try {
t2 = arg.toString().split('.')[1].length
} catch (e) { }
// 小数位数
var digit = Math.pow(10, Math.abs(t1 - t2))
// eslint-disable-next-line eqeqeq
if (digit == 1) { digit = Math.pow(10, t1) }
// 计算余数
r1 = (this * digit).toString().split('.')[0]
r2 = arg * digit
// 小数点后数字,直接拼接上即可
var decimals = (this * digit).toString().split('.')[1] ? (this * digit).toString().split('.')[1] : ''
return (r1 % r2 + decimals) / digit
}
}
export default {
name: 'Slider',
mixins: [emitter, listeners, touchtrack],
......@@ -151,22 +223,21 @@ export default {
})
},
methods: {
_onUserChangedValue (e) {
const sliderRightBox = this.$refs['uni-slider-value']
const sliderRightBoxLeft = getComputedStyle(sliderRightBox, null).marginLeft
let sliderRightBoxWidth = sliderRightBox.offsetWidth
sliderRightBoxWidth = sliderRightBoxWidth + parseInt(sliderRightBoxLeft)
_onUserChangedValue (e) {
const sliderRightBox = this.$refs['uni-slider-value']
const sliderRightBoxLeft = getComputedStyle(sliderRightBox, null).marginLeft
let sliderRightBoxWidth = sliderRightBox.offsetWidth
sliderRightBoxWidth = sliderRightBoxWidth + parseInt(sliderRightBoxLeft)
const slider = this.$refs['uni-slider']
const offsetWidth = slider.offsetWidth - (this.showValue ? sliderRightBoxWidth : 0)
const boxLeft = slider.getBoundingClientRect().left
const value = (e.x - boxLeft) * (this.max - this.min) / offsetWidth + Number(this.min)
this.sliderValue = this._filterValue(value)
},
_filterValue (e) {
const max = Number(this.max)
_filterValue (e) {
const max = Number(this.max)
const min = Number(this.min)
return e < min ? min : e > max ? max : Math.round((e - min) / this
.step) * this.step + min
return e < min ? min : e > max ? max : computeController.mul.call(Math.round((e - min) / this.step), this.step) + min
},
_getValueWidth () {
return 100 * (this.sliderValue - this.min) / (this.max - this.min) + '%'
......@@ -180,7 +251,7 @@ export default {
: '#e9e9e9')
},
_onTrack: function (e) {
if (!this.disabled) {
if (!this.disabled) {
return e.detail.state === 'move' ? (this._onUserChangedValue({
x: e.detail.x0
}), this.$trigger('changing', e, {
......@@ -288,11 +359,11 @@ export default {
z-index: 1;
}
uni-slider .uni-slider-value {
uni-slider .uni-slider-value {
width: 3ch;
color: #888;
font-size: 14px;
margin-left: 1em;
margin-left: 1em;
}
uni-slider .uni-slider-disabled .uni-slider-track {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册