u-number-box.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-number-box",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$19],
  6. data() {
  7. return {
  8. // 输入框实际操作的值
  9. currentValue: "",
  10. // 定时器
  11. longPressTimer: null
  12. };
  13. },
  14. watch: {
  15. // 多个值之间,只要一个值发生变化,都要重新检查check()函数
  16. watchChange(n) {
  17. this.check();
  18. },
  19. // 监听v-mode的变化,重新初始化内部的值
  20. modelValue(n) {
  21. if (n !== this.currentValue) {
  22. this.currentValue = this.format(this.modelValue);
  23. }
  24. }
  25. },
  26. computed: {
  27. getCursorSpacing() {
  28. return common_vendor.index.$u.getPx(this.cursorSpacing);
  29. },
  30. // 按钮的样式
  31. buttonStyle() {
  32. return (type) => {
  33. const style = {
  34. backgroundColor: this.bgColor,
  35. height: common_vendor.index.$u.addUnit(this.buttonSize),
  36. color: this.color
  37. };
  38. if (this.isDisabled(type)) {
  39. style.backgroundColor = "#f7f8fa";
  40. }
  41. return style;
  42. };
  43. },
  44. // 输入框的样式
  45. inputStyle() {
  46. this.disabled || this.disabledInput;
  47. const style = {
  48. color: this.color,
  49. backgroundColor: this.bgColor,
  50. height: common_vendor.index.$u.addUnit(this.buttonSize),
  51. width: common_vendor.index.$u.addUnit(this.inputWidth)
  52. };
  53. return style;
  54. },
  55. // 用于监听多个值发生变化
  56. watchChange() {
  57. return [this.integer, this.decimalLength, this.min, this.max];
  58. },
  59. isDisabled() {
  60. return (type) => {
  61. if (type === "plus") {
  62. return this.disabled || this.disablePlus || this.currentValue >= this.max;
  63. }
  64. return this.disabled || this.disableMinus || this.currentValue <= this.min;
  65. };
  66. }
  67. },
  68. mounted() {
  69. this.init();
  70. },
  71. emits: ["update:modelValue", "focus", "blur", "overlimit", "change", "plus", "minus"],
  72. methods: {
  73. init() {
  74. this.currentValue = this.format(this.modelValue);
  75. },
  76. // 格式化整理数据,限制范围
  77. format(value) {
  78. value = this.filter(value);
  79. value = value === "" ? 0 : +value;
  80. value = Math.max(Math.min(this.max, value), this.min);
  81. if (this.decimalLength !== null) {
  82. value = value.toFixed(this.decimalLength);
  83. }
  84. return value;
  85. },
  86. // 过滤非法的字符
  87. filter(value) {
  88. value = String(value).replace(/[^0-9.-]/g, "");
  89. if (this.integer && value.indexOf(".") !== -1) {
  90. value = value.split(".")[0];
  91. }
  92. return value;
  93. },
  94. check() {
  95. const val = this.format(this.currentValue);
  96. if (val !== this.currentValue) {
  97. this.currentValue = val;
  98. }
  99. },
  100. // 判断是否出于禁止操作状态
  101. // isDisabled(type) {
  102. // if (type === 'plus') {
  103. // // 在点击增加按钮情况下,判断整体的disabled,是否单独禁用增加按钮,以及当前值是否大于最大的允许值
  104. // return (
  105. // this.disabled ||
  106. // this.disablePlus ||
  107. // this.currentValue >= this.max
  108. // )
  109. // }
  110. // // 点击减少按钮同理
  111. // return (
  112. // this.disabled ||
  113. // this.disableMinus ||
  114. // this.currentValue <= this.min
  115. // )
  116. // },
  117. // 输入框活动焦点
  118. onFocus(event) {
  119. this.$emit("focus", {
  120. ...event.detail,
  121. name: this.name
  122. });
  123. },
  124. // 输入框失去焦点
  125. onBlur(event) {
  126. this.format(event.detail.value);
  127. this.$emit(
  128. "blur",
  129. {
  130. ...event.detail,
  131. name: this.name
  132. }
  133. );
  134. },
  135. // 输入框值发生变化
  136. onInput(e) {
  137. const {
  138. value = ""
  139. } = e.detail || {};
  140. if (value === "")
  141. return;
  142. let formatted = this.filter(value);
  143. if (this.decimalLength !== null && formatted.indexOf(".") !== -1) {
  144. const pair = formatted.split(".");
  145. formatted = `${pair[0]}.${pair[1].slice(0, this.decimalLength)}`;
  146. }
  147. formatted = this.format(formatted);
  148. this.emitChange(formatted);
  149. },
  150. // 发出change事件
  151. emitChange(value) {
  152. if (!this.asyncChange) {
  153. this.$nextTick(() => {
  154. this.$emit("update:modelValue", value);
  155. this.currentValue = value;
  156. this.$forceUpdate();
  157. });
  158. }
  159. this.$emit("change", {
  160. value,
  161. name: this.name
  162. });
  163. },
  164. onChange() {
  165. const {
  166. type
  167. } = this;
  168. if (this.isDisabled(type)) {
  169. return this.$emit("overlimit", type);
  170. }
  171. const diff = type === "minus" ? -this.step : +this.step;
  172. const value = this.format(this.add(+this.currentValue, diff));
  173. this.emitChange(value);
  174. this.$emit(type);
  175. },
  176. // 对值扩大后进行四舍五入,再除以扩大因子,避免出现浮点数操作的精度问题
  177. add(num1, num2) {
  178. const cardinal = Math.pow(10, 10);
  179. return Math.round((num1 + num2) * cardinal) / cardinal;
  180. },
  181. // 点击加减按钮
  182. clickHandler(type) {
  183. this.type = type;
  184. this.onChange();
  185. },
  186. longPressStep() {
  187. this.clearTimeout();
  188. this.longPressTimer = setTimeout(() => {
  189. this.onChange();
  190. this.longPressStep();
  191. }, 250);
  192. },
  193. onTouchStart(type) {
  194. if (!this.longPress)
  195. return;
  196. this.clearTimeout();
  197. this.type = type;
  198. this.longPressTimer = setTimeout(() => {
  199. this.onChange();
  200. this.longPressStep();
  201. }, 600);
  202. },
  203. // 触摸结束,清除定时器,停止长按加减
  204. onTouchEnd() {
  205. if (!this.longPress)
  206. return;
  207. this.clearTimeout();
  208. },
  209. // 清除定时器
  210. clearTimeout() {
  211. clearTimeout(this.longPressTimer);
  212. this.longPressTimer = null;
  213. }
  214. }
  215. };
  216. if (!Array) {
  217. const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
  218. _easycom_u_icon2();
  219. }
  220. const _easycom_u_icon = () => "../u-icon/u-icon.js";
  221. if (!Math) {
  222. _easycom_u_icon();
  223. }
  224. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  225. return common_vendor.e({
  226. a: _ctx.showMinus && _ctx.$slots.minus
  227. }, _ctx.showMinus && _ctx.$slots.minus ? {
  228. b: common_vendor.o(($event) => $options.clickHandler("minus")),
  229. c: common_vendor.o(($event) => $options.onTouchStart("minus")),
  230. d: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args))
  231. } : _ctx.showMinus ? {
  232. f: common_vendor.p({
  233. name: "minus",
  234. color: $options.isDisabled("minus") ? "#c8c9cc" : "#323233",
  235. size: "15",
  236. bold: true,
  237. customStyle: _ctx.iconStyle
  238. }),
  239. g: common_vendor.o(($event) => $options.clickHandler("minus")),
  240. h: common_vendor.o(($event) => $options.onTouchStart("minus")),
  241. i: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args)),
  242. j: $options.isDisabled("minus") ? 1 : "",
  243. k: common_vendor.s($options.buttonStyle("minus"))
  244. } : {}, {
  245. e: _ctx.showMinus,
  246. l: _ctx.disabledInput || _ctx.disabled,
  247. m: $options.getCursorSpacing,
  248. n: _ctx.disabled || _ctx.disabledInput ? 1 : "",
  249. o: common_vendor.o((...args) => $options.onBlur && $options.onBlur(...args)),
  250. p: common_vendor.o((...args) => $options.onFocus && $options.onFocus(...args)),
  251. q: common_vendor.o([($event) => $data.currentValue = $event.detail.value, (...args) => $options.onInput && $options.onInput(...args)]),
  252. r: common_vendor.s($options.inputStyle),
  253. s: $data.currentValue,
  254. t: _ctx.showPlus && _ctx.$slots.plus
  255. }, _ctx.showPlus && _ctx.$slots.plus ? {
  256. v: common_vendor.o(($event) => $options.clickHandler("plus")),
  257. w: common_vendor.o(($event) => $options.onTouchStart("plus")),
  258. x: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args))
  259. } : _ctx.showPlus ? {
  260. z: common_vendor.p({
  261. name: "plus",
  262. color: $options.isDisabled("plus") ? "#c8c9cc" : "#323233",
  263. size: "15",
  264. bold: true,
  265. customStyle: _ctx.iconStyle
  266. }),
  267. A: common_vendor.o(($event) => $options.clickHandler("plus")),
  268. B: common_vendor.o(($event) => $options.onTouchStart("plus")),
  269. C: common_vendor.o((...args) => $options.clearTimeout && $options.clearTimeout(...args)),
  270. D: $options.isDisabled("plus") ? 1 : "",
  271. E: common_vendor.s($options.buttonStyle("plus"))
  272. } : {}, {
  273. y: _ctx.showPlus
  274. });
  275. }
  276. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a83780b3"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/node_modules/uview-plus/components/u-number-box/u-number-box.vue"]]);
  277. wx.createComponent(Component);