2018-03-07 14:21:55 +00:00
|
|
|
<script>
|
2018-03-08 15:02:04 +00:00
|
|
|
import PropTypes from '../_util/vue-types'
|
|
|
|
import BaseMixin from '../_util/BaseMixin'
|
2018-03-07 14:21:55 +00:00
|
|
|
import classnames from 'classnames'
|
2018-03-08 15:02:04 +00:00
|
|
|
function noop () {}
|
2018-03-07 14:21:55 +00:00
|
|
|
const scrollTo = (element, to, duration) => {
|
|
|
|
const requestAnimationFrame = window.requestAnimationFrame ||
|
|
|
|
function requestAnimationFrameTimeout () {
|
|
|
|
return setTimeout(arguments[0], 10)
|
|
|
|
}
|
|
|
|
// jump to target if duration zero
|
|
|
|
if (duration <= 0) {
|
|
|
|
element.scrollTop = to
|
|
|
|
return
|
|
|
|
}
|
|
|
|
const difference = to - element.scrollTop
|
|
|
|
const perTick = difference / duration * 10
|
|
|
|
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
element.scrollTop = element.scrollTop + perTick
|
|
|
|
if (element.scrollTop === to) return
|
|
|
|
scrollTo(element, to, duration - 10)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
const Select = {
|
|
|
|
mixins: [BaseMixin],
|
|
|
|
props: {
|
2018-03-07 14:21:55 +00:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
options: PropTypes.array,
|
|
|
|
selectedIndex: PropTypes.number,
|
|
|
|
type: PropTypes.string,
|
2018-03-08 15:02:04 +00:00
|
|
|
// onSelect: PropTypes.func,
|
|
|
|
// onMouseEnter: PropTypes.func,
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
active: false,
|
2018-03-07 14:21:55 +00:00
|
|
|
}
|
2018-03-08 15:02:04 +00:00
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
mounted () {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
// jump to selected option
|
|
|
|
this.scrollToSelected(0)
|
2018-03-07 14:21:55 +00:00
|
|
|
})
|
2018-03-08 15:02:04 +00:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
selectedIndex (val) {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
// smooth scroll to selected option
|
|
|
|
this.scrollToSelected(120)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onSelect (value) {
|
|
|
|
const { type } = this
|
|
|
|
this.__emit('select', type, value)
|
|
|
|
},
|
|
|
|
|
|
|
|
getOptions () {
|
|
|
|
const { options, selectedIndex, prefixCls } = this
|
|
|
|
return options.map((item, index) => {
|
|
|
|
const cls = classnames({
|
|
|
|
[`${prefixCls}-select-option-selected`]: selectedIndex === index,
|
|
|
|
[`${prefixCls}-select-option-disabled`]: item.disabled,
|
|
|
|
})
|
|
|
|
let onClick = noop
|
|
|
|
if (!item.disabled) {
|
|
|
|
onClick = this.onSelect.bind(this, item.value)
|
|
|
|
}
|
|
|
|
return (<li
|
|
|
|
class={cls}
|
|
|
|
key={index}
|
|
|
|
onClick={onClick}
|
|
|
|
disabled={item.disabled}
|
|
|
|
>
|
|
|
|
{item.value}
|
|
|
|
</li>)
|
|
|
|
})
|
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
scrollToSelected (duration) {
|
2018-03-07 14:21:55 +00:00
|
|
|
// move to selected item
|
2018-03-08 15:02:04 +00:00
|
|
|
const select = this.$el
|
|
|
|
const list = this.$refs.list
|
|
|
|
if (!list) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
let index = this.selectedIndex
|
|
|
|
if (index < 0) {
|
|
|
|
index = 0
|
|
|
|
}
|
|
|
|
const topOption = list.children[index]
|
|
|
|
const to = topOption.offsetTop
|
|
|
|
scrollTo(select, to, duration)
|
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
handleMouseEnter (e) {
|
|
|
|
this.setState({ active: true })
|
|
|
|
this.__emit('mouseenter', e)
|
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
handleMouseLeave () {
|
|
|
|
this.setState({ active: false })
|
|
|
|
},
|
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
|
|
|
|
render () {
|
2018-03-08 15:02:04 +00:00
|
|
|
if (this.options.length === 0) {
|
2018-03-07 14:21:55 +00:00
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2018-03-08 15:02:04 +00:00
|
|
|
const { prefixCls } = this
|
|
|
|
const cls = {
|
2018-03-07 14:21:55 +00:00
|
|
|
[`${prefixCls}-select`]: 1,
|
2018-03-08 15:02:04 +00:00
|
|
|
[`${prefixCls}-select-active`]: this.active,
|
|
|
|
}
|
2018-03-07 14:21:55 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2018-03-08 15:02:04 +00:00
|
|
|
class={cls}
|
|
|
|
onMouseenter={this.handleMouseEnter}
|
|
|
|
onMouseleave={this.handleMouseLeave}
|
2018-03-07 14:21:55 +00:00
|
|
|
>
|
2018-03-08 15:02:04 +00:00
|
|
|
<ul ref='list'>{this.getOptions()}</ul>
|
2018-03-07 14:21:55 +00:00
|
|
|
</div>
|
|
|
|
)
|
2018-03-08 15:02:04 +00:00
|
|
|
},
|
2018-03-07 14:21:55 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Select
|
|
|
|
</script>
|