90 lines
2.2 KiB
Vue
Executable File
90 lines
2.2 KiB
Vue
Executable File
import { initDefaultProps } from '../../_util/props-util'
|
||
import { cloneElement } from '../../_util/vnode'
|
||
import warning from '../../_util/warning'
|
||
import BaseMixin from '../../_util/BaseMixin'
|
||
import { ITouchProps } from './PropTypes'
|
||
|
||
export default {
|
||
name: 'TouchFeedback',
|
||
mixins: [BaseMixin],
|
||
props: initDefaultProps(ITouchProps, {
|
||
disabled: false,
|
||
}),
|
||
data () {
|
||
return {
|
||
active: false,
|
||
}
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
if (this.disabled && this.active) {
|
||
this.setState({
|
||
active: false,
|
||
})
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
triggerEvent (type, isActive, ev) {
|
||
// 暂时仅有input-number用到，事件直接到挂载到Touchable上，不需要像antd那样从子组件触发
|
||
this.$emit(type, ev)
|
||
if (isActive !== this.active) {
|
||
this.setState({
|
||
active: isActive,
|
||
})
|
||
}
|
||
},
|
||
onTouchStart (e) {
|
||
this.triggerEvent('touchstart', true, e)
|
||
},
|
||
onTouchMove (e) {
|
||
this.triggerEvent('touchmove', false, e)
|
||
},
|
||
onTouchEnd (e) {
|
||
this.triggerEvent('touchend', false, e)
|
||
},
|
||
onTouchCancel (e) {
|
||
this.triggerEvent('touchcancel', false, e)
|
||
},
|
||
onMouseDown (e) {
|
||
// pc simulate mobile
|
||
this.triggerEvent('mousedown', true, e)
|
||
},
|
||
onMouseUp (e) {
|
||
this.triggerEvent('mouseup', false, e)
|
||
},
|
||
onMouseLeave (e) {
|
||
this.triggerEvent('mouseleave', false, e)
|
||
},
|
||
},
|
||
render () {
|
||
const { disabled, activeClassName = '', activeStyle = {}} = this.$props
|
||
|
||
const child = this.$slots.default
|
||
if (child.length !== 1) {
|
||
warning(false, 'm-feedback组件只能包含一个子元素')
|
||
return null
|
||
}
|
||
let childProps = {
|
||
on: disabled ? {} : {
|
||
touchstart: this.onTouchStart,
|
||
touchmove: this.onTouchMove,
|
||
touchend: this.onTouchEnd,
|
||
touchcancel: this.onTouchCancel,
|
||
mousedown: this.onMouseDown,
|
||
mouseup: this.onMouseUp,
|
||
mouseleave: this.onMouseLeave,
|
||
},
|
||
}
|
||
|
||
if (!disabled && this.active) {
|
||
childProps = { ...childProps, ...{
|
||
style: activeStyle,
|
||
class: activeClassName,
|
||
}}
|
||
}
|
||
|
||
return cloneElement(child, childProps)
|
||
},
|
||
}
|