diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts index 2d9de97..89e3573 100644 --- a/src/components/slider/slider.ts +++ b/src/components/slider/slider.ts @@ -46,19 +46,29 @@ export class StarSlider extends LitElement { @property({type: String}) step = '' @property({type: String}) get endValue() { + if (Number(this._endValue) < 0) { + this._endValue = '0' + } else if (Number(this._endValue) > 100) { + this._endValue = '100' + } return this._endValue } set endValue(value: string) { const type = getType(value) + if (Number(value) < 0) { + value = '0' + } else if (Number(value) > 100) { + value = '100' + } if (type == 'percent' && !isNaN(+value)) { - value += '%' + // value += '%' } else if (type == 'invalid') { value = this._endValue return } - this.style.setProperty('--cover-width', value) + this.style.setProperty('--cover-width', value + '%') this._endValue = value - this.style.setProperty('--dot-move', this._endValue) + this.style.setProperty('--dot-move', this._endValue + '%') } @property({type: String}) get vHeight() { @@ -139,6 +149,7 @@ export class StarSlider extends LitElement { } this.proportion = (this.barX / this.barWidth) * 100 this.endValue = Math.ceil(this.proportion) + '' + // console.log(`this.proportion = ${this.proportion} ,endvalue = ${this.endValue}`); if (this.tick) { // tick跳格滑动 var tickStep = 100 / parseInt(this.step) //分为几格 @@ -179,8 +190,7 @@ export class StarSlider extends LitElement { if (this.newX < 0) { this.newX = 0 - } - if (this.newX >= this.barWidth) { + } else if (this.newX >= this.barWidth) { this.newX = this.barWidth } //计算比例