优化进度条组件;重构滑块组件
parent
0cde6f7c02
commit
8461d75a69
|
|
@ -185,11 +185,12 @@ class Progress extends Component {
|
|||
}
|
||||
|
||||
#drawLine(v) {
|
||||
let l = v < 2 ? 2 : v > 98 ? 98 : v
|
||||
return html`
|
||||
<div class="progress-bar">
|
||||
<mark class="thumb" style=${styleMap({ width: v + '%' })}></mark>
|
||||
</div>
|
||||
<div class="progress-value" style=${styleMap({ left: v + '%' })}>
|
||||
<div class="progress-value" style=${styleMap({ left: l + '%' })}>
|
||||
${v}%
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/03/21 16:14:10
|
||||
* {进度条}
|
||||
* @author chensbox<chensbox@foxmail.com>
|
||||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, bind, unbind, html, Component } from 'wkit'
|
||||
import { css, html, Component, range } from 'wkit'
|
||||
|
||||
class Slider extends Component {
|
||||
static props = {
|
||||
|
|
@ -12,325 +12,267 @@ class Slider extends Component {
|
|||
type: Number,
|
||||
default: 0,
|
||||
observer(val) {
|
||||
this.$bar && this.initValue(val)
|
||||
this.value = this.#fix(val)
|
||||
}
|
||||
},
|
||||
type: 'info',
|
||||
max: 100,
|
||||
min: 0,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
vertical: false
|
||||
step: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
observer(v) {
|
||||
v += ''
|
||||
this.#decimal = v.split('.').pop().length
|
||||
}
|
||||
},
|
||||
min: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
observer(v) {
|
||||
this.#updateRange()
|
||||
}
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
observer(v) {
|
||||
this.#updateRange()
|
||||
}
|
||||
},
|
||||
vertical: false,
|
||||
disabled: false
|
||||
}
|
||||
|
||||
#len = 100
|
||||
#stops = 10 // 断点数, 最大只显示10个断点
|
||||
#point = 10 // 每个断点的百分比
|
||||
#value = 0 // 内部的值, 固定使用 0-100范围的值
|
||||
#decimal = 0 //小数位
|
||||
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
min-height: 32px;
|
||||
}
|
||||
.slider {
|
||||
|
||||
.container {
|
||||
--line-width: var(--wc-slider-line-width, 6px);
|
||||
--base-color: var(--wc-slider-inactive-color, var(--color-plain-2));
|
||||
--active-color: var(--wc-slider-active-color, var(--color-teal-1));
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.runway {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 6px;
|
||||
// width: 100%;
|
||||
background: #e4e7ed;
|
||||
border-radius: 99rem;
|
||||
cursor: pointer;
|
||||
.bar {
|
||||
flex: 1;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: 99rem;
|
||||
background: var(--color-blue-2, #409eff);
|
||||
}
|
||||
}
|
||||
.dot-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
cursor: grab;
|
||||
transform: translate(-50%, -50%);
|
||||
.dot {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-blue-2, #409eff);
|
||||
background: #fff;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
width: 100%;
|
||||
height: var(--line-width);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
z-index: 2000;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
min-width: 10px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
background: #303133;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
|
||||
.slider-bar {
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
content: '';
|
||||
border-top-color: #303133;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: var(--line-width);
|
||||
border-radius: 32px;
|
||||
background: var(--base-color);
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
//状态
|
||||
// vertical
|
||||
css`
|
||||
:host([vertical]) {
|
||||
display: inline-block;
|
||||
width: 38px;
|
||||
height: 250px;
|
||||
.slider {
|
||||
justify-content: center;
|
||||
.runway {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
width: 6px;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
|
||||
cursor: pointer;
|
||||
.bar {
|
||||
height: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
.dot-wrapper {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -180%);
|
||||
}
|
||||
}
|
||||
:host([hide-tooltip]) .tips {
|
||||
visibility: hidden;
|
||||
.container {
|
||||
width: var(--line-width);
|
||||
height: 100%;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
:host([loading]),
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
.slider-bar {
|
||||
width: var(--line-width);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
top: auto;
|
||||
transform: translate(calc(var(--line-width) / 2 - 16px), 16px);
|
||||
}
|
||||
}
|
||||
`,
|
||||
//配色
|
||||
css`
|
||||
$colors: (
|
||||
primary: 'teal',
|
||||
info: 'blue',
|
||||
success: 'green',
|
||||
warning: 'orange',
|
||||
danger: 'red',
|
||||
secondary: 'dark',
|
||||
help: 'grey'
|
||||
);
|
||||
|
||||
@loop $t, $c in $colors {
|
||||
:host([type='#{$t}']) {
|
||||
.bar {
|
||||
background-color: var(--color-#{$c}-2);
|
||||
// stops
|
||||
css`
|
||||
:host([show-stops]) {
|
||||
.slider-bar {
|
||||
i {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: var(--line-width);
|
||||
height: var(--line-width);
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.dot {
|
||||
border-color: var(--color-#{$c}-2);
|
||||
}
|
||||
}
|
||||
`,
|
||||
// thumb
|
||||
css`
|
||||
.thumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc((32px - var(--line-width)) / -2);
|
||||
z-index: 2;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 7px;
|
||||
transform: translateX(-16px);
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid var(--active-color);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
background: #fff;
|
||||
cursor: grab;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.value {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 32px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background: var(--color-dark-2);
|
||||
color: #fff;
|
||||
transform: translateX(-50%);
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-dark-2);
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.value {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
&::before {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
progress = 0
|
||||
mounted() {
|
||||
this.$bar = this.$refs.bar
|
||||
this.$dotWrap = this.$refs.dotWrap
|
||||
this.$runway = this.$refs.runway
|
||||
this.$tips = this.$refs.tips
|
||||
this.accuracy = this.step >= 1 ? 0 : String(this.step).split('.')[1].length
|
||||
this.initValue(this.value)
|
||||
}
|
||||
onMousedown(e) {
|
||||
let {
|
||||
value: preValue,
|
||||
step,
|
||||
max,
|
||||
min,
|
||||
progress,
|
||||
vertical,
|
||||
disabled,
|
||||
readOnly,
|
||||
accuracy
|
||||
} = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
this.$tips.classList.toggle('show')
|
||||
preValue = +preValue || min
|
||||
|
||||
let start = vertical ? e.clientY : e.clientX
|
||||
let onMousemove = bind(document, 'mousemove', e => {
|
||||
e.preventDefault()
|
||||
let distance = (vertical ? e.clientY : e.clientX) - start
|
||||
let scale =
|
||||
(distance /
|
||||
(vertical ? this.$runway.clientHeight : this.$runway.clientWidth)) *
|
||||
(vertical ? -1 : 1)
|
||||
|
||||
let diff =
|
||||
accuracy === 0 ? Math.round(scale * (max - min)) : scale * (max - min)
|
||||
let newProgress = progress + Math.floor(scale * 100)
|
||||
let newValue =
|
||||
accuracy === 0 ? Math.floor(preValue + diff) : preValue + diff
|
||||
newValue = Math.max(newValue, min)
|
||||
newValue = Math.min(newValue, max)
|
||||
|
||||
if (accuracy === 0) {
|
||||
if (newValue % step) {
|
||||
return
|
||||
#updateRange() {
|
||||
let { min, max, step } = this
|
||||
if (min >= max) {
|
||||
throw new Error('Slider props "min >= max"')
|
||||
}
|
||||
let len = max - min
|
||||
this.#stops = ~~(len / step)
|
||||
if (this.#stops > 10) {
|
||||
this.#stops = 10
|
||||
}
|
||||
this.#len = len
|
||||
this.#point = +(100 / this.#stops).toFixed(2)
|
||||
}
|
||||
|
||||
#fix(val) {
|
||||
let { min, max, step } = this
|
||||
let fix
|
||||
val = Math.max(min, Math.min(val, max))
|
||||
val = +val.toFixed(this.#decimal)
|
||||
|
||||
fix = +(val % step).toFixed(this.#decimal)
|
||||
if (fix !== step) {
|
||||
if (fix < step / 2) {
|
||||
val -= fix
|
||||
} else {
|
||||
let _newValue = Math.round(newValue * Math.pow(10, accuracy))
|
||||
let _step = step * Math.pow(10, accuracy)
|
||||
if (_newValue % _step) {
|
||||
return
|
||||
val = val - fix + step
|
||||
}
|
||||
}
|
||||
this.value = newValue.toFixed(accuracy)
|
||||
requestAnimationFrame(() => {
|
||||
this.setProgress(vertical ? 100 - newProgress : newProgress)
|
||||
})
|
||||
this.$emit('input')
|
||||
})
|
||||
|
||||
let onMouseup = bind(document, 'mouseup', () => {
|
||||
unbind(document, 'mousemove', onMousemove)
|
||||
unbind(document, 'mouseup', onMouseup)
|
||||
this.$tips.classList.toggle('show')
|
||||
this.$emit('change')
|
||||
})
|
||||
this.#value = Math.round(((val - min) * 100) / (max - min))
|
||||
return val
|
||||
}
|
||||
onClick(e) {
|
||||
if (e.target !== this.$refs.runway) {
|
||||
return
|
||||
}
|
||||
let { max, min, step, vertical, disabled, readOnly, accuracy } = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
let { clientWidth, clientHeight } = e.target
|
||||
let { offsetX, offsetY } = e
|
||||
let range = max - min
|
||||
let scale =
|
||||
(vertical ? offsetY : offsetX) / (vertical ? clientHeight : clientWidth)
|
||||
|
||||
step *= Math.pow(10, accuracy)
|
||||
|
||||
let newValue =
|
||||
+(scale * range + min).toFixed(accuracy) * Math.pow(10, accuracy)
|
||||
let mod = +(newValue % step).toFixed(accuracy)
|
||||
if (mod) {
|
||||
let half = step / 2
|
||||
if (mod > half) {
|
||||
newValue += step - mod
|
||||
#seek(ev) {
|
||||
let { clientWidth, clientHeight } = ev.target
|
||||
let { min, max, step } = this
|
||||
let val = 0
|
||||
if (this.vertical) {
|
||||
val = (clientHeight - ev.offsetY) / clientHeight
|
||||
} else {
|
||||
newValue -= mod
|
||||
val = ev.offsetX / clientWidth
|
||||
}
|
||||
val *= this.#len
|
||||
val += min
|
||||
|
||||
this.value = this.#fix(val)
|
||||
}
|
||||
|
||||
newValue *= Math.pow(10, -accuracy)
|
||||
this.value = (vertical ? range - newValue : newValue).toFixed(accuracy)
|
||||
let progress = Math.floor(((newValue - min) / range) * 100)
|
||||
this.setProgress(progress)
|
||||
this.$emit('change')
|
||||
this.$emit('input')
|
||||
if (!this.timeout) {
|
||||
this.$tips.classList.toggle('show')
|
||||
} else {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
get #activeStyle() {
|
||||
let v = this.#value
|
||||
let deg = this.vertical ? 0 : '90deg'
|
||||
return `background:linear-gradient(${deg}, var(--active-color) ${v}%, transparent ${v}%)`
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$tips.classList.toggle('show')
|
||||
this.timeout = null
|
||||
}, 1000)
|
||||
}
|
||||
initValue(val) {
|
||||
let { max, min, vertical, disabled, readOnly } = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
let range = max - min
|
||||
val = Math.max(val, min)
|
||||
val = Math.min(val, max)
|
||||
this.value = val
|
||||
let progress = Math.floor(((val - min) / range) * 100)
|
||||
progress = vertical ? 100 - progress : progress
|
||||
this.setProgress(progress)
|
||||
}
|
||||
setProgress(val) {
|
||||
let { vertical } = this
|
||||
val = Math.floor(val)
|
||||
val = Math.min(val, 100)
|
||||
val = Math.max(val, 0)
|
||||
if (vertical) {
|
||||
this.$bar.style.height = `${100 - val}%`
|
||||
this.$dotWrap.style.top = `${val}%`
|
||||
this.$tips.style.top = `${val}%`
|
||||
this.progress = 100 - val
|
||||
} else {
|
||||
this.$bar.style.width = `${val}%`
|
||||
this.$dotWrap.style.left = `${val}%`
|
||||
this.$tips.style.left = `${val}%`
|
||||
this.progress = val
|
||||
|
||||
get #thumbStyle() {
|
||||
let v = this.#value
|
||||
if (this.vertical) {
|
||||
return `bottom:${v}%`
|
||||
}
|
||||
return `left:${v}%`
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<div class="slider" ref="slider">
|
||||
<div ref="runway" class="runway" @click=${this.onClick}>
|
||||
<div class="bar" ref="bar"></div>
|
||||
<div class="dot-wrapper" ref="dotWrap" @mousedown=${this.onMousedown}>
|
||||
<div class="dot"></div>
|
||||
let n = this.hasAttribute('show-stops') ? this.#stops : 1
|
||||
|
||||
return html`
|
||||
<main class="container">
|
||||
<div class="slider-bar">
|
||||
${range(1, n).map(i => {
|
||||
return html`<i style="left:${i * this.#point}%"></i>`
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
class="slider-bar"
|
||||
style=${this.#activeStyle}
|
||||
@click=${this.#seek}
|
||||
></div>
|
||||
|
||||
<div class="thumb" style=${this.#thumbStyle}>
|
||||
<mark class="value">${this.value}</mark>
|
||||
</div>
|
||||
<div class="tips" ref="tips">${this.value}</div>
|
||||
</div>`
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue