100 lines
2.4 KiB
Vue
Executable File
100 lines
2.4 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) {
|
|
// const eventType = `on${type}`
|
|
// if (this.props[eventType]) {
|
|
// this.props[eventType](ev)
|
|
// }
|
|
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) {
|
|
// todo
|
|
// pc simulate mobile
|
|
// if (this.props.onTouchStart) {
|
|
this.triggerEvent('touchstart', true, e)
|
|
// }
|
|
this.triggerEvent('mousedown', true, e)
|
|
},
|
|
onMouseUp (e) {
|
|
// if (this.props.onTouchEnd) {
|
|
this.triggerEvent('touchend', false, 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)
|
|
},
|
|
}
|