bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

暂存

master
chenjiajian 2023-03-23 17:20:27 +08:00
parent 32f89ab889
commit 3342f205d2
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/slider/index.js
View File

@ -98,7 +98,7 @@ class Slider extends Component {
} }
} }
.cursor-default { .cursor-default {
cursor: default; cursor: grabbing !important;
} }
` `
@ -106,16 +106,15 @@ class Slider extends Component {
console.log('slider mounted') console.log('slider mounted')
console.log(this.$refs, 'refs') console.log(this.$refs, 'refs')
this.$bar = this.root.querySelector('.bar') this.$bar = this.$refs.bar
this.$dotWrap = this.root.querySelector('.dot-wrapper') this.$dotWrap = this.$refs.dotWrap
this.$runway = this.root.querySelector('.runway') this.$runway = this.$refs.runway
this.$tips = this.root.querySelector('.tips') this.$tips = this.$refs.tips
} }
onMousedown(e) { onMousedown(e) {
console.log(e)
document.documentElement.classList.toggle('cursor-default') document.documentElement.classList.toggle('cursor-default')
const start = e.clientX const start = e.clientX
const preValue = this.value const { value: preValue, step, max, min } = this
const onMousemove = bind(document, 'mousemove', e => { const onMousemove = bind(document, 'mousemove', e => {
const distance = e.clientX - start const distance = e.clientX - start
const diff = Math.round((distance / this.$runway.clientWidth) * 100) const diff = Math.round((distance / this.$runway.clientWidth) * 100)
@ -127,19 +126,26 @@ class Slider extends Component {
if (newValue > 100) { if (newValue > 100) {
newValue = 100 newValue = 100
} }
if (newValue % step) {
return
}
this.$bar.style.width = newValue + '%' this.$bar.style.width = newValue + '%'
this.$dotWrap.style.left = newValue + '%' this.$dotWrap.style.left = newValue + '%'
this.$tips.style.left = newValue + '%' this.$tips.style.left = newValue + '%'
this.value = newValue this.value = newValue
}) })
bind(document, 'mouseup', e => { const onMouseup = bind(document, 'mouseup', e => {
unbind(document, 'mousemove', onMousemove) unbind(document, 'mousemove', onMousemove)
unbind(document, 'mouseup', onMouseup)
document.documentElement.classList.toggle('cursor-default') document.documentElement.classList.toggle('cursor-default')
}) })
} }
onClick(e) { onClick(e) {
console.log(e) if (e.target !== this.$refs.runway) {
return
}
const { clientWidth } = e.target const { clientWidth } = e.target
const { offsetX } = e const { offsetX } = e
this.value = Math.floor((offsetX / clientWidth) * 100) this.value = Math.floor((offsetX / clientWidth) * 100)
@ -151,13 +157,13 @@ class Slider extends Component {
} }
render() { render() {
return html`<div class="slider" ref="slider"> return html`<div class="slider" ref="slider">
<div class="runway" @click=${this.onClick}> <div ref="runway" class="runway" @click=${this.onClick}>
<div class="bar"></div> <div class="bar" ref="bar"></div>
<div class="dot-wrapper" @mousedown=${this.onMousedown}> <div class="dot-wrapper" ref="dotWrap" @mousedown=${this.onMousedown}>
<div class="dot" ref="dot"></div> <div class="dot"></div>
</div> </div>
</div> </div>
<div class="tips">${this.value}</div> <div class="tips" ref="tips">${this.value}</div>
</div>` </div>`
} }
} }