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

完成slider组件

master
chenjiajian 2023-03-24 14:46:59 +08:00
parent 20616529db
commit 3b09af7968
1 changed files with 232 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

350
src/slider/index.js
View File

@ -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">