This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化select的样式;修复滚动组件的事件冒泡

old
宇天 2019-08-13 21:13:11 +08:00
parent 2bf6398486
commit 0191fa6141
2 changed files with 26 additions and 37 deletions

View File

@ -36,7 +36,7 @@ li {
border-radius: inherit; border-radius: inherit;
background: #fff; background: #fff;
color: inherit; color: inherit;
cursor: text; cursor: default;
input { input {
flex: 1; flex: 1;

View File

@ -76,6 +76,7 @@
</style> </style>
<script> <script>
import { bind, ebind, unbind } from '../utils'
// 是否火狐浏览器 // 是否火狐浏览器
const IS_FF = !!window.sidebar const IS_FF = !!window.sidebar
@ -156,7 +157,7 @@ export default class Scroll {
mounted() { mounted() {
// 初始化滚动条的位置和长度 // 初始化滚动条的位置和长度
this._initFn = ev => { this._initFn = bind(this.__BOX__, 'mouseenter', ev => {
var ow = this.__BOX__.offsetWidth var ow = this.__BOX__.offsetWidth
var sw = this.__BOX__.scrollWidth var sw = this.__BOX__.scrollWidth
var oh = this.__BOX__.offsetHeight var oh = this.__BOX__.offsetHeight
@ -189,10 +190,10 @@ export default class Scroll {
this.__X__.style.width = xw + 'px' this.__X__.style.width = xw + 'px'
this.__Y__.style.height = yh + 'px' this.__Y__.style.height = yh + 'px'
} })
// 鼠标滚动事件 // 鼠标滚动事件
this._wheelFn = ev => { this._wheelFn = ebind(this.__BOX__, 'wheel', ev => {
ev.preventDefault() ev.preventDefault()
var { sh, oh, yh, sw, ow, xw } = this.props var { sh, oh, yh, sw, ow, xw } = this.props
@ -239,11 +240,7 @@ export default class Scroll {
this.__Y__.style.transform = `translateY(${fixedY}px)` this.__Y__.style.transform = `translateY(${fixedY}px)`
} }
} })
this.__BOX__.addEventListener('mouseenter', this._initFn, false)
this.__BOX__.addEventListener('wheel', this._wheelFn, false)
var startX, var startX,
startY, startY,
@ -264,40 +261,32 @@ export default class Scroll {
startY = null startY = null
this.props.thumbX = moveX this.props.thumbX = moveX
this.props.thumbY = moveY this.props.thumbY = moveY
document.removeEventListener('mousemove', mousemoveFn) unbind(document, 'mousemove', mousemoveFn)
document.removeEventListener('mouseup', mouseupFn) unbind(document, 'mouseup', mouseupFn)
} }
this.__Y__.addEventListener( bind(this.__Y__, 'mousedown', ev => {
'mousedown',
ev => {
startY = ev.pageY startY = ev.pageY
if (!this.props.thumbY) { if (!this.props.thumbY) {
this.props.thumbY = 0 this.props.thumbY = 0
} }
document.addEventListener('mousemove', mousemoveFn, false) bind(document, 'mousemove', mousemoveFn)
document.addEventListener('mouseup', mouseupFn, false) bind(document, 'mouseup', mouseupFn)
}, })
false
)
this.__X__.addEventListener( bind(this.__X__, 'mousedown', ev => {
'mousedown',
ev => {
startX = ev.pageX startX = ev.pageX
if (!this.props.thumbX) { if (!this.props.thumbX) {
this.props.thumbX = 0 this.props.thumbX = 0
} }
document.addEventListener('mousemove', mousemoveFn, false) bind(document, 'mousemove', mousemoveFn)
document.addEventListener('mouseup', mouseupFn, false) bind(document, 'mouseup', mouseupFn)
}, })
false
)
} }
unmount() { unmount() {
this.__BOX__.removeEventListener('mouseenter', this._initFn) unbind(this.__BOX__, 'mouseenter', this._initFn)
this.__BOX__.removeEventListener('wheel', this._wheelFn) unbind(this.__BOX__, 'wheel', this._wheelFn)
} }
} }
</script> </script>