-
${this.pValue}
-
-
-
+ if (!this.vertical) {
+ return html`
+
+
-
- `
+ `
+ } else {
+ return html`
+
+
+ `
+ }
}
+ protected firstUpdated(
+ _changedProperties: PropertyValueMap
| Map
+ ): void {
+ if (this.vertical) {
+ this.touchStart = this.touchStartVertical
+ this.touchEnd = this.touchEndVertical
+ this.touchMove = this.touchMoveVertical
+ }
+ if (this.tick) {
+ var tickStep = 100 / parseInt(this.step)
+ for (let i = 0; i <= tickStep; i++) {
+ const stepTick = document.createElement('div')
+ stepTick.style.setProperty('--i', String(i / tickStep))
+ stepTick.classList.add('step')
+ this.sliderBar.appendChild(stepTick)
+ }
+ }
+ }
+
private touchStart(evt: TouchEvent) {
- this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth //总长度减去小球覆盖的部分
- this.dotL = this.dot.offsetLeft //小球左侧相对于父元素的左边距
- this.startX = evt.touches[0].clientX //手指点下的 X 坐标
+ if (!this.disabled) {
+ this.touchX = evt.touches[0].clientX //手指触摸的 x 坐标
+ // 黑色覆盖部分
+ this.barX =
+ this.touchX -
+ this.sliderBar.getBoundingClientRect().left -
+ this.dot.offsetWidth * 0.5
+ this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth
+ if (this.barX < 0) {
+ this.barX = 0
+ }
+ if (this.barX >= this.barWidth) {
+ this.barX = this.barWidth
+ }
+ this.proportion = (this.barX / this.barWidth) * 100
+ this.endValue = Math.ceil(this.proportion) + ''
+ if (this.tick) {
+ // tick跳格滑动
+ var tickStep = 100 / parseInt(this.step) //分为几格
+ for (let i = 0; i <= tickStep; i++) {
+ if (this.barX > (this.barWidth * (i + 0.5)) / tickStep) {
+ this.style.setProperty(
+ '--dot-move',
+ (this.barWidth * (i + 1)) / tickStep + 'px'
+ )
+ }
+ if (this.barX == 0) {
+ this.style.setProperty('--dot-move', 0 + 'px')
+ }
+ }
+ } else {
+ this.style.setProperty('--dot-move', this.barX + 'px')
+ this.progress.style.setProperty(
+ 'width',
+ (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
+ )
+ }
+ // 重新初始化防止滑块增量
+ this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标
+ this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth //总长度减去小球覆盖的部分
+ this.dotL = this.dot.offsetLeft //小球左侧相对于父元素的左边距
+ }
}
private touchMove(evt: TouchEvent) {
- //阻止默认行为
- evt.preventDefault()
- this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标
- this.moveX = this.touchX - this.startX //手指移动的距离
- //判断最大值和最小值
- this.newX = this.dotL + this.moveX
- if (this.newX < 0) {
- this.newX = 0
+ if (!this.disabled) {
+ //阻止默认行为
+ evt.preventDefault()
+ this.touchX = evt.touches[0].clientX //整个屏幕实时触摸的 X 坐标
+ this.moveX = this.touchX - this.startX //手指移动的距离
+
+ //判断最大值和最小值
+ this.newX = this.dotL + this.moveX
+
+ if (this.newX < 0) {
+ this.newX = 0
+ }
+ if (this.newX >= this.barWidth) {
+ this.newX = this.barWidth
+ }
+ //计算比例
+ this.proportion = (this.newX / this.barWidth) * 100
+ //取整
+ this.endValue = Math.ceil(this.proportion) + ''
+ if (!this.tick) {
+ this.style.setProperty('--dot-move', this.newX + 'px')
+ this.progress.style.setProperty(
+ 'width',
+ (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
+ )
+ } else {
+ // tick跳格滑动
+ var tickStep = 100 / parseInt(this.step) //分为几格
+ for (let i = 0; i <= tickStep; i++) {
+ if (this.newX > (this.barWidth * (i + 0.5)) / tickStep) {
+ this.style.setProperty(
+ '--dot-move',
+ (this.barWidth * (i + 1)) / tickStep + 'px'
+ )
+ this.proportion =
+ ((this.barWidth * (i + 1)) / tickStep / this.barWidth) * 100
+ //取整
+ this.endValue = Math.ceil(this.proportion) + ''
+ }
+ if (this.newX == 0) {
+ this.style.setProperty('--dot-move', 0 + 'px')
+ this.endValue = 0 + ''
+ }
+ }
+ }
}
- if (this.newX >= this.barWidth) {
- this.newX = this.barWidth
- }
- //改变dot的left值
- this.style.setProperty('--dot-move', this.newX + 'px')
- //计算比例
- this.proportion = (this.newX / this.barWidth) * 100
- this.pValue = Math.ceil(this.proportion) + ''
- this.progress.style.setProperty(
- 'width',
- (this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
- )
}
private touchEnd(evt: TouchEvent) {
- return console.log(this.pValue)
+ if (this.tick) {
+ return console.log(10 * Math.round(parseInt(this.endValue) / 10) + '')
+ } else {
+ return console.log(this.endValue)
+ }
+ }
+
+ private touchStartVertical(evt: TouchEvent) {
+ if (!this.disabled) {
+ this.startY = evt.touches[0].clientY //手指点下的初始 Y 坐标
+ this.barWidth = this.vSliderBar.offsetHeight //总长度
+ this.dotL = this.barWidth - this.vProgress.offsetTop //黑条长度
+ //按压音量条变宽
+ this.vSliderBar.style.setProperty('--vWidth', '16px')
+ this.vProgress.style.setProperty('--vWidth', '16px')
+ }
+ }
+ private touchMoveVertical(evt: TouchEvent) {
+ if (!this.disabled) {
+ //阻止默认行为
+ evt.preventDefault()
+ this.touchY = evt.touches[0].clientY //整个屏幕实时触摸的 Y 坐标
+ this.moveY = this.startY - this.touchY //手指移动的距离
+ //判断最大值和最小值
+ this.newY = this.dotL + this.moveY
+ if (this.newY < 0) {
+ // console.log('到底了')
+ this.newY = 0
+ }
+ if (this.newY >= this.barWidth) {
+ // console.log('超了')
+ this.newY = this.barWidth
+ }
+ //计算比例
+ this.proportion = (this.newY / this.barWidth) * 100
+ //取整
+ this.endValue = Math.ceil(this.proportion) + ''
+ this.vProgress.style.setProperty('height', this.newY + 'px')
+ }
+ }
+ private touchEndVertical(evt: TouchEvent) {
+ if (!this.disabled) {
+ this.vProgress.style.setProperty('--vWidth', '8px')
+ this.vSliderBar.style.setProperty('--vWidth', '8px')
+ return console.log(this.endValue)
+ }
}
}
-
declare global {
interface HTMLElementTagNameMap {
'star-slider': StarSlider
diff --git a/src/test/panels/slider/slider.ts b/src/test/panels/slider/slider.ts
index fa301f0..8933900 100644
--- a/src/test/panels/slider/slider.ts
+++ b/src/test/panels/slider/slider.ts
@@ -1,29 +1,68 @@
import {html, LitElement, css} from 'lit'
-import {customElement} from 'lit/decorators.js'
+import {customElement, property} from 'lit/decorators.js'
+import '../icon/icon'
@customElement('panel-slider')
export class PanelSlider extends LitElement {
+ @property({type: String}) icon = ''
+
static styles = css`
div {
position: relative;
- border: 1px solid;
margin: 50px 50px;
border-radius: 5px;
}
+ #a {
+ position: absolute;
+ left: 100px;
+ top: 45px;
+ }
+ #b {
+ position: absolute;
+ left: 200px;
+ top: 45px;
+ }
`
render() {
return html`
-
default
-
-
初始化覆盖长度
-
-
+
vertical
+
+
+
+
+
+
+
+
+
+
default - 默认
+
+
+
+
coverWidth - 初始覆盖长度
+
+
+
+
+
+
disabled
-
-
-
+
+
+
unfilled - 无覆盖
+
+
+
tick
+
step="10"
+
+
step="20"
+
+
step="50"
+
+
step="25"
+