95 lines
2.3 KiB
Vue
Executable File
95 lines
2.3 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);
|
||
},
|
||
};
|