index.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var component_1 = require("../common/component");
  4. var utils_1 = require("../common/utils");
  5. var LONG_PRESS_START_TIME = 600;
  6. var LONG_PRESS_INTERVAL = 200;
  7. // add num and avoid float number
  8. function add(num1, num2) {
  9. var cardinal = Math.pow(10, 10);
  10. return Math.round((num1 + num2) * cardinal) / cardinal;
  11. }
  12. component_1.VantComponent({
  13. field: true,
  14. classes: ['input-class', 'plus-class', 'minus-class'],
  15. props: {
  16. value: {
  17. type: null,
  18. observer: function (value) {
  19. if (value === '') {
  20. return;
  21. }
  22. var newValue = this.range(value);
  23. if (typeof newValue === 'number' && +this.data.value !== newValue) {
  24. this.setData({ value: newValue });
  25. }
  26. },
  27. },
  28. integer: Boolean,
  29. disabled: Boolean,
  30. inputWidth: {
  31. type: null,
  32. observer: function () {
  33. this.setData({
  34. inputStyle: this.computeInputStyle()
  35. });
  36. },
  37. },
  38. buttonSize: {
  39. type: null,
  40. observer: function () {
  41. this.setData({
  42. inputStyle: this.computeInputStyle(),
  43. buttonStyle: this.computeButtonStyle()
  44. });
  45. }
  46. },
  47. asyncChange: Boolean,
  48. disableInput: Boolean,
  49. decimalLength: {
  50. type: Number,
  51. value: null
  52. },
  53. min: {
  54. type: null,
  55. value: 1
  56. },
  57. max: {
  58. type: null,
  59. value: Number.MAX_SAFE_INTEGER
  60. },
  61. step: {
  62. type: null,
  63. value: 1
  64. },
  65. showPlus: {
  66. type: Boolean,
  67. value: true
  68. },
  69. showMinus: {
  70. type: Boolean,
  71. value: true
  72. },
  73. disablePlus: Boolean,
  74. disableMinus: Boolean,
  75. longPress: {
  76. type: Boolean,
  77. value: true
  78. },
  79. },
  80. data: {
  81. focus: false,
  82. inputStyle: '',
  83. buttonStyle: ''
  84. },
  85. created: function () {
  86. this.setData({
  87. value: this.range(this.data.value)
  88. });
  89. },
  90. methods: {
  91. isDisabled: function (type) {
  92. if (type === 'plus') {
  93. return this.data.disabled || this.data.disablePlus || this.data.value >= this.data.max;
  94. }
  95. return this.data.disabled || this.data.disableMinus || this.data.value <= this.data.min;
  96. },
  97. onFocus: function (event) {
  98. this.$emit('focus', event.detail);
  99. },
  100. onBlur: function (event) {
  101. var value = this.range(this.data.value);
  102. this.triggerInput(value);
  103. this.$emit('blur', event.detail);
  104. },
  105. // limit value range
  106. range: function (value) {
  107. value = String(value).replace(/[^0-9.-]/g, '');
  108. // format range
  109. value = value === '' ? 0 : +value;
  110. value = Math.max(Math.min(this.data.max, value), this.data.min);
  111. // format decimal
  112. if (utils_1.isDef(this.data.decimalLength)) {
  113. value = value.toFixed(this.data.decimalLength);
  114. }
  115. return value;
  116. },
  117. onInput: function (event) {
  118. var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
  119. this.triggerInput(value);
  120. },
  121. onChange: function () {
  122. var type = this.type;
  123. if (this.isDisabled(type)) {
  124. this.$emit('overlimit', type);
  125. return;
  126. }
  127. var diff = type === 'minus' ? -this.data.step : +this.data.step;
  128. var value = add(+this.data.value, diff);
  129. this.triggerInput(this.range(value));
  130. this.$emit(type);
  131. },
  132. longPressStep: function () {
  133. var _this = this;
  134. this.longPressTimer = setTimeout(function () {
  135. _this.onChange();
  136. _this.longPressStep();
  137. }, LONG_PRESS_INTERVAL);
  138. },
  139. onTap: function (event) {
  140. var type = event.currentTarget.dataset.type;
  141. this.type = type;
  142. this.onChange();
  143. },
  144. onTouchStart: function (event) {
  145. var _this = this;
  146. if (!this.data.longPress) {
  147. return;
  148. }
  149. clearTimeout(this.longPressTimer);
  150. var type = event.currentTarget.dataset.type;
  151. this.type = type;
  152. this.isLongPress = false;
  153. this.longPressTimer = setTimeout(function () {
  154. _this.isLongPress = true;
  155. _this.onChange();
  156. _this.longPressStep();
  157. }, LONG_PRESS_START_TIME);
  158. },
  159. onTouchEnd: function () {
  160. if (!this.data.longPress) {
  161. return;
  162. }
  163. clearTimeout(this.longPressTimer);
  164. },
  165. triggerInput: function (value) {
  166. this.setData({
  167. value: this.data.asyncChange ? this.data.value : value
  168. });
  169. this.$emit('change', value);
  170. },
  171. computeInputStyle: function () {
  172. var style = '';
  173. if (this.data.inputWidth) {
  174. style = "width: " + utils_1.addUnit(this.data.inputWidth) + ";";
  175. }
  176. if (this.data.buttonSize) {
  177. style += "height: " + utils_1.addUnit(this.data.buttonSize) + ";";
  178. }
  179. return style;
  180. },
  181. computeButtonStyle: function () {
  182. var style = '';
  183. var size = utils_1.addUnit(this.data.buttonSize);
  184. if (this.data.buttonSize) {
  185. style = "width: " + size + ";height: " + size + ";";
  186. }
  187. return style;
  188. }
  189. }
  190. });