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

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

上级 aec26a6c
...@@ -2,33 +2,33 @@ ...@@ -2,33 +2,33 @@
<uni-slider <uni-slider
ref="uni-slider" ref="uni-slider"
v-on="$listeners" v-on="$listeners"
@click="_onClick" @click="_onClick"
> >
<div class="uni-slider-wrapper"> <div class="uni-slider-wrapper">
<div class="uni-slider-tap-area"> <div class="uni-slider-tap-area">
<div <div
:style="setBgColor" :style="setBgColor"
class="uni-slider-handle-wrapper" class="uni-slider-handle-wrapper"
> >
<div <div
ref="uni-slider-handle" ref="uni-slider-handle"
:style="setBlockBg" :style="setBlockBg"
class="uni-slider-handle" class="uni-slider-handle"
/> />
<div <div
:style="setBlockStyle" :style="setBlockStyle"
class="uni-slider-thumb" class="uni-slider-thumb"
/> />
<div <div
:style="setActiveColor" :style="setActiveColor"
class="uni-slider-track" class="uni-slider-track"
/> />
</div> </div>
</div> </div>
<span <span
v-show="showValue" v-show="showValue"
ref="uni-slider-value" ref="uni-slider-value"
class="uni-slider-value" class="uni-slider-value"
>{{ sliderValue }}</span> >{{ sliderValue }}</span>
</div> </div>
<slot /> <slot />
...@@ -40,6 +40,78 @@ import { ...@@ -40,6 +40,78 @@ import {
listeners listeners
} from 'uni-mixins' } from 'uni-mixins'
import touchtrack from 'uni-mixins/touchtrack' 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 { export default {
name: 'Slider', name: 'Slider',
mixins: [emitter, listeners, touchtrack], mixins: [emitter, listeners, touchtrack],
...@@ -151,22 +223,21 @@ export default { ...@@ -151,22 +223,21 @@ export default {
}) })
}, },
methods: { methods: {
_onUserChangedValue (e) { _onUserChangedValue (e) {
const sliderRightBox = this.$refs['uni-slider-value'] const sliderRightBox = this.$refs['uni-slider-value']
const sliderRightBoxLeft = getComputedStyle(sliderRightBox, null).marginLeft const sliderRightBoxLeft = getComputedStyle(sliderRightBox, null).marginLeft
let sliderRightBoxWidth = sliderRightBox.offsetWidth let sliderRightBoxWidth = sliderRightBox.offsetWidth
sliderRightBoxWidth = sliderRightBoxWidth + parseInt(sliderRightBoxLeft) sliderRightBoxWidth = sliderRightBoxWidth + parseInt(sliderRightBoxLeft)
const slider = this.$refs['uni-slider'] const slider = this.$refs['uni-slider']
const offsetWidth = slider.offsetWidth - (this.showValue ? sliderRightBoxWidth : 0) const offsetWidth = slider.offsetWidth - (this.showValue ? sliderRightBoxWidth : 0)
const boxLeft = slider.getBoundingClientRect().left const boxLeft = slider.getBoundingClientRect().left
const value = (e.x - boxLeft) * (this.max - this.min) / offsetWidth + Number(this.min) const value = (e.x - boxLeft) * (this.max - this.min) / offsetWidth + Number(this.min)
this.sliderValue = this._filterValue(value) this.sliderValue = this._filterValue(value)
}, },
_filterValue (e) { _filterValue (e) {
const max = Number(this.max) const max = Number(this.max)
const min = Number(this.min) const min = Number(this.min)
return e < min ? min : e > max ? max : Math.round((e - min) / this return e < min ? min : e > max ? max : computeController.mul.call(Math.round((e - min) / this.step), this.step) + min
.step) * this.step + min
}, },
_getValueWidth () { _getValueWidth () {
return 100 * (this.sliderValue - this.min) / (this.max - this.min) + '%' return 100 * (this.sliderValue - this.min) / (this.max - this.min) + '%'
...@@ -180,7 +251,7 @@ export default { ...@@ -180,7 +251,7 @@ export default {
: '#e9e9e9') : '#e9e9e9')
}, },
_onTrack: function (e) { _onTrack: function (e) {
if (!this.disabled) { if (!this.disabled) {
return e.detail.state === 'move' ? (this._onUserChangedValue({ return e.detail.state === 'move' ? (this._onUserChangedValue({
x: e.detail.x0 x: e.detail.x0
}), this.$trigger('changing', e, { }), this.$trigger('changing', e, {
...@@ -288,11 +359,11 @@ export default { ...@@ -288,11 +359,11 @@ export default {
z-index: 1; z-index: 1;
} }
uni-slider .uni-slider-value { uni-slider .uni-slider-value {
width: 3ch; width: 3ch;
color: #888; color: #888;
font-size: 14px; font-size: 14px;
margin-left: 1em; margin-left: 1em;
} }
uni-slider .uni-slider-disabled .uni-slider-track { 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.
先完成此消息的编辑!
想要评论请 注册