Merge branch 'master' of github.com:9th-js/wcui
commit
ae48529d72
|
|
@ -4,161 +4,246 @@
|
|||
* @date 2023/03/21 16:14:10
|
||||
*/
|
||||
|
||||
import { nextTick, css, bind, unbind, html, Component } from '@bd/core'
|
||||
import { css, bind, unbind, html, Component } from '@bd/core'
|
||||
|
||||
class Slider extends Component {
|
||||
static props = {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
observer() {}
|
||||
observer(val) {
|
||||
this.$bar && this.initValue(val)
|
||||
}
|
||||
},
|
||||
type: 'info',
|
||||
max: 100,
|
||||
min: 0,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
vertical: false,
|
||||
'show-tooltip': true
|
||||
vertical: false
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
}
|
||||
.slider {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
.runway {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 6px;
|
||||
background: #e4e7ed;
|
||||
border-radius: 99rem;
|
||||
cursor: pointer;
|
||||
.bar {
|
||||
flex: 1;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
border-radius: 99rem;
|
||||
background: #409eff;
|
||||
static styles = [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.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 #409eff;
|
||||
background: #fff;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
.slider {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
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;
|
||||
word-wrap: break-word;
|
||||
color: #fff;
|
||||
background: #303133;
|
||||
transform: translateX(-50%);
|
||||
&:after {
|
||||
.dot-wrapper {
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
content: '';
|
||||
border-top-color: #303133;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
`
|
||||
.tips {
|
||||
opacity: 0;
|
||||
pointer-events: 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;
|
||||
word-wrap: break-word;
|
||||
color: #fff;
|
||||
background: #303133;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
content: '';
|
||||
border-top-color: #303133;
|
||||
}
|
||||
}
|
||||
`,
|
||||
//状态
|
||||
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;
|
||||
height: 100%;
|
||||
|
||||
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([loading]),
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
`,
|
||||
//配色
|
||||
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);
|
||||
}
|
||||
.dot {
|
||||
border-color: var(--color-#{$c}-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
]
|
||||
progress = 0
|
||||
mounted() {
|
||||
console.log('slider mounted')
|
||||
console.log(this.$refs, 'refs')
|
||||
|
||||
this.$bar = this.$refs.bar
|
||||
this.$dotWrap = this.$refs.dotWrap
|
||||
this.$runway = this.$refs.runway
|
||||
this.$tips = this.$refs.tips
|
||||
this.initValue(this.value)
|
||||
}
|
||||
onMousedown(e) {
|
||||
document.documentElement.classList.toggle('cursor-default')
|
||||
const start = e.clientX
|
||||
let { value: preValue, step, max, min, progress } = this
|
||||
let {
|
||||
value: preValue,
|
||||
step,
|
||||
max,
|
||||
min,
|
||||
progress,
|
||||
vertical,
|
||||
disabled,
|
||||
readOnly
|
||||
} = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
this.$tips.classList.toggle('show')
|
||||
preValue = preValue || min
|
||||
|
||||
const start = vertical ? e.clientY : e.clientX
|
||||
const onMousemove = bind(document, 'mousemove', e => {
|
||||
const distance = e.clientX - start
|
||||
const scale = distance / this.$runway.clientWidth
|
||||
e.preventDefault()
|
||||
const distance = (vertical ? e.clientY : e.clientX) - start
|
||||
const scale =
|
||||
(distance /
|
||||
(vertical ? this.$runway.clientHeight : this.$runway.clientWidth)) *
|
||||
(vertical ? -1 : 1)
|
||||
|
||||
const diff = Math.round(scale * (max - min))
|
||||
let newValue = Math.floor(preValue + diff)
|
||||
// console.log({ diff, preValue })
|
||||
let newProgress = progress + Math.floor(scale * 100)
|
||||
if (newValue < min) {
|
||||
newValue = min
|
||||
}
|
||||
if (newValue > max) {
|
||||
newValue = max
|
||||
}
|
||||
let newValue = Math.floor(preValue + diff)
|
||||
newValue = Math.max(newValue, min)
|
||||
newValue = Math.min(newValue, max)
|
||||
if (newValue % step) {
|
||||
return
|
||||
}
|
||||
// console.warn(newValue)
|
||||
this.value = newValue
|
||||
this.setProgress(newProgress)
|
||||
requestAnimationFrame(() => {
|
||||
this.setProgress(vertical ? 100 - newProgress : newProgress)
|
||||
})
|
||||
this.$emit('input')
|
||||
})
|
||||
|
||||
const onMouseup = bind(document, 'mouseup', () => {
|
||||
unbind(document, 'mousemove', onMousemove)
|
||||
unbind(document, 'mouseup', onMouseup)
|
||||
this.$tips.classList.toggle('show')
|
||||
this.$emit('change')
|
||||
})
|
||||
}
|
||||
onClick(e) {
|
||||
if (e.target !== this.$refs.runway) {
|
||||
return
|
||||
}
|
||||
const { max, min, step } = this
|
||||
const { clientWidth } = e.target
|
||||
const { offsetX } = e
|
||||
const { max, min, step, vertical, disabled, readOnly } = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
const { clientWidth, clientHeight } = e.target
|
||||
const { offsetX, offsetY } = e
|
||||
const range = max - min
|
||||
const scale = offsetX / clientWidth
|
||||
// console.log(
|
||||
// {
|
||||
// scale,
|
||||
// range
|
||||
// },
|
||||
// scale * range + min
|
||||
// )
|
||||
const scale =
|
||||
(vertical ? offsetY : offsetX) / (vertical ? clientHeight : clientWidth)
|
||||
|
||||
let newValue = Math.floor(scale * range + min)
|
||||
const mod = newValue % step
|
||||
if (mod) {
|
||||
|
|
@ -169,21 +254,50 @@ class Slider extends Component {
|
|||
newValue -= mod
|
||||
}
|
||||
}
|
||||
this.value = newValue
|
||||
console.log(scale * 100)
|
||||
//const progress = Math.floor(scale * 100)
|
||||
this.value = vertical ? range - newValue : newValue
|
||||
const progress = Math.floor(((newValue - min) / range) * 100)
|
||||
// console.log({ progress })
|
||||
this.setProgress(progress)
|
||||
this.$emit('change')
|
||||
if (!this.timeout) {
|
||||
this.$tips.classList.toggle('show')
|
||||
} else {
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = null
|
||||
}
|
||||
this.timeout = setTimeout(() => {
|
||||
this.$tips.classList.toggle('show')
|
||||
this.timeout = null
|
||||
}, 1000)
|
||||
}
|
||||
initValue(val) {
|
||||
const { max, min, vertical, disabled, readOnly } = this
|
||||
if (disabled || readOnly) {
|
||||
return
|
||||
}
|
||||
const 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) {
|
||||
const { vertical } = this
|
||||
val = Math.floor(val)
|
||||
val = val > 100 ? 100 : val
|
||||
val = val < 0 ? 0 : val
|
||||
this.$bar.style.width = `${val}%`
|
||||
this.$dotWrap.style.left = `${val}%`
|
||||
this.$tips.style.left = `${val}%`
|
||||
this.progress = 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
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return html`<div class="slider" ref="slider">
|
||||
|
|
|
|||
Loading…
Reference in New Issue