1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _propsUtil = require('../../_util/props-util');
var _vnode = require('../../_util/vnode');
var _warning = require('../../_util/warning');
var _warning2 = _interopRequireDefault(_warning);
var _BaseMixin = require('../../_util/BaseMixin');
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _PropTypes = require('./PropTypes');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
exports['default'] = {
name: 'TouchFeedback',
mixins: [_BaseMixin2['default']],
props: (0, _propsUtil.initDefaultProps)(_PropTypes.ITouchProps, {
disabled: false
}),
data: function data() {
return {
active: false
};
},
mounted: function mounted() {
var _this = this;
this.$nextTick(function () {
if (_this.disabled && _this.active) {
_this.setState({
active: false
});
}
});
},
methods: {
triggerEvent: function triggerEvent(type, isActive, ev) {
// 暂时仅有input-number用到，事件直接到挂载到Touchable上，不需要像antd那样从子组件触发
this.$emit(type, ev);
if (isActive !== this.active) {
this.setState({
active: isActive
});
}
},
onTouchStart: function onTouchStart(e) {
this.triggerEvent('touchstart', true, e);
},
onTouchMove: function onTouchMove(e) {
this.triggerEvent('touchmove', false, e);
},
onTouchEnd: function onTouchEnd(e) {
this.triggerEvent('touchend', false, e);
},
onTouchCancel: function onTouchCancel(e) {
this.triggerEvent('touchcancel', false, e);
},
onMouseDown: function onMouseDown(e) {
// pc simulate mobile
this.triggerEvent('mousedown', true, e);
},
onMouseUp: function onMouseUp(e) {
this.triggerEvent('mouseup', false, e);
},
onMouseLeave: function onMouseLeave(e) {
this.triggerEvent('mouseleave', false, e);
}
},
render: function render() {
var _$props = this.$props,
disabled = _$props.disabled,
_$props$activeClassNa = _$props.activeClassName,
activeClassName = _$props$activeClassNa === undefined ? '' : _$props$activeClassNa,
_$props$activeStyle = _$props.activeStyle,
activeStyle = _$props$activeStyle === undefined ? {} : _$props$activeStyle;
var child = this.$slots['default'];
if (child.length !== 1) {
(0, _warning2['default'])(false, 'm-feedback组件只能包含一个子元素');
return null;
}
var 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 = (0, _extends3['default'])({}, childProps, {
style: activeStyle,
'class': activeClassName
});
}
return (0, _vnode.cloneElement)(child, childProps);
}
};