增加slider组件
parent
cc99526b36
commit
32f89ab889
|
|
@ -0,0 +1,113 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/03/21 16:14:10
|
||||
*/
|
||||
|
||||
import { nextTick, css, html, Component } from '@bd/core'
|
||||
import '../icon/index.js'
|
||||
import '../form/input.js'
|
||||
import '../scroll/index.js'
|
||||
class Select extends Component {
|
||||
static props = {
|
||||
value: {
|
||||
type: Array,
|
||||
default: [],
|
||||
attribute: false,
|
||||
observer() {
|
||||
// this.#updateChildrenStat()
|
||||
}
|
||||
},
|
||||
disabled: false,
|
||||
readonly: false
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
--size: 14px;
|
||||
line-height: 100%;
|
||||
transform: rotate(90deg);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
.input {
|
||||
width: 200px;
|
||||
}
|
||||
.select {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.select:focus-within {
|
||||
.icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.option-list {
|
||||
height: 150px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
}
|
||||
.option-list {
|
||||
position: absolute;
|
||||
margin: 5px 0;
|
||||
top: 110%;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
z-index: 1001;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
transition: height 0.2s ease-in-out;
|
||||
&:after {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 20%;
|
||||
// top: -16px;
|
||||
// border: 8px solid #fff;
|
||||
// border-top-color: transparent;
|
||||
// border-right-color: transparent;
|
||||
// border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
mounted() {
|
||||
console.log('select mounted')
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="select">
|
||||
<wc-input readonly class="input">
|
||||
<wc-icon slot="append" class="icon" name="right" / >
|
||||
</wc-input>
|
||||
<wc-scroll class="option-list">
|
||||
<slot />
|
||||
</wc-scroll>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
class Option extends Component {
|
||||
static props = {
|
||||
value: '2'
|
||||
}
|
||||
|
||||
static styles = [css``]
|
||||
|
||||
mounted() {
|
||||
// console.log(this.value)
|
||||
// console.log(this.$refs)
|
||||
// console.log(this.root.innerHTML)
|
||||
console.log('option mounted')
|
||||
}
|
||||
onclick() {
|
||||
console.log(11)
|
||||
}
|
||||
render() {
|
||||
return html` <div ref="li">${this.value}</div> `
|
||||
}
|
||||
}
|
||||
|
||||
Select.reg('select')
|
||||
Option.reg('option')
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @date 2023/03/21 16:14:10
|
||||
*/
|
||||
|
||||
import { nextTick, css, bind, unbind, html, Component } from '@bd/core'
|
||||
|
||||
class Slider extends Component {
|
||||
static props = {
|
||||
value: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
observer() {}
|
||||
},
|
||||
max: null,
|
||||
min: null,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
vertical: false,
|
||||
'show-tooltip': true
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
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 {
|
||||
position: absolute;
|
||||
border: 6px solid transparent;
|
||||
bottom: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
content: '';
|
||||
border-top-color: #303133;
|
||||
}
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
`
|
||||
|
||||
mounted() {
|
||||
console.log('slider mounted')
|
||||
console.log(this.$refs, 'refs')
|
||||
|
||||
this.$bar = this.root.querySelector('.bar')
|
||||
this.$dotWrap = this.root.querySelector('.dot-wrapper')
|
||||
this.$runway = this.root.querySelector('.runway')
|
||||
this.$tips = this.root.querySelector('.tips')
|
||||
}
|
||||
onMousedown(e) {
|
||||
console.log(e)
|
||||
document.documentElement.classList.toggle('cursor-default')
|
||||
const start = e.clientX
|
||||
const preValue = this.value
|
||||
const onMousemove = bind(document, 'mousemove', e => {
|
||||
const distance = e.clientX - start
|
||||
const diff = Math.round((distance / this.$runway.clientWidth) * 100)
|
||||
let newValue = preValue + diff
|
||||
newValue = Math.floor(newValue)
|
||||
if (newValue < 0) {
|
||||
newValue = 0
|
||||
}
|
||||
if (newValue > 100) {
|
||||
newValue = 100
|
||||
}
|
||||
this.$bar.style.width = newValue + '%'
|
||||
this.$dotWrap.style.left = newValue + '%'
|
||||
this.$tips.style.left = newValue + '%'
|
||||
this.value = newValue
|
||||
})
|
||||
|
||||
bind(document, 'mouseup', e => {
|
||||
unbind(document, 'mousemove', onMousemove)
|
||||
document.documentElement.classList.toggle('cursor-default')
|
||||
})
|
||||
}
|
||||
onClick(e) {
|
||||
console.log(e)
|
||||
const { clientWidth } = e.target
|
||||
const { offsetX } = e
|
||||
this.value = Math.floor((offsetX / clientWidth) * 100)
|
||||
const barWidth = `${this.value}%`
|
||||
|
||||
this.$bar.style.width = barWidth
|
||||
this.$dotWrap.style.left = barWidth
|
||||
this.$tips.style.left = barWidth
|
||||
}
|
||||
render() {
|
||||
return html`<div class="slider" ref="slider">
|
||||
<div class="runway" @click=${this.onClick}>
|
||||
<div class="bar"></div>
|
||||
<div class="dot-wrapper" @mousedown=${this.onMousedown}>
|
||||
<div class="dot" ref="dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips">${this.value}</div>
|
||||
</div>`
|
||||
}
|
||||
}
|
||||
|
||||
Slider.reg('slider')
|
||||
Loading…
Reference in New Issue