You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

363 lines
11 KiB

3 years ago
  1. <template>
  2. <view class="u-numberbox">
  3. <view class="u-icon-minus" @touchstart.stop.prevent="btnTouchStart('minus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal <= min }"
  4. :style="{
  5. background: bgColor,
  6. height: inputHeight + 'rpx',
  7. color: color
  8. }">
  9. <u-icon name="minus" :size="size"></u-icon>
  10. </view>
  11. <input :disabled="disabledInput || disabled" :cursor-spacing="getCursorSpacing" :class="{ 'u-input-disabled': disabled }"
  12. v-model="inputVal" class="u-number-input" @blur="onBlur" @focus="onFocus"
  13. type="number" :style="{
  14. color: color,
  15. fontSize: size + 'rpx',
  16. background: bgColor,
  17. height: inputHeight + 'rpx',
  18. width: inputWidth + 'rpx'
  19. }" />
  20. <view class="u-icon-plus" @touchstart.stop.prevent="btnTouchStart('plus')" @touchend.stop.prevent="clearTimer" :class="{ 'u-icon-disabled': disabled || inputVal >= max }"
  21. :style="{
  22. background: bgColor,
  23. height: inputHeight + 'rpx',
  24. color: color
  25. }">
  26. <u-icon name="plus" :size="size"></u-icon>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. /**
  32. * numberBox 步进器
  33. * @description 该组件一般用于商城购物选择物品数量的场景注意该输入框只能输入大于或等于0的整数不支持小数输入
  34. * @tutorial https://www.uviewui.com/components/numberBox.html
  35. * @property {Number} value 输入框初始值默认1
  36. * @property {String} bg-color 输入框和按钮的背景颜色默认#F2F3F5
  37. * @property {Number} min 用户可输入的最小值默认0
  38. * @property {Number} max 用户可输入的最大值默认99999
  39. * @property {Number} step 步长每次加或减的值默认1
  40. * @property {Boolean} disabled 是否禁用操作禁用后无法加减或手动修改输入框的值默认false
  41. * @property {Boolean} disabled-input 是否禁止输入框手动输入值默认false
  42. * @property {Boolean} positive-integer 是否只能输入正整数默认true
  43. * @property {String | Number} size 输入框文字和按钮字体大小单位rpx默认26
  44. * @property {String} color 输入框文字和加减按钮图标的颜色默认#323233
  45. * @property {String | Number} input-width 输入框宽度单位rpx默认80
  46. * @property {String | Number} input-height 输入框和按钮的高度单位rpx默认50
  47. * @property {String | Number} index 事件回调时用以区分当前发生变化的是哪个输入框
  48. * @property {Boolean} long-press 是否开启长按连续递增或递减(默认true)
  49. * @property {String | Number} press-time 开启长按触发后每触发一次需要多久单位ms(默认250)
  50. * @property {String | Number} cursor-spacing 指定光标于键盘的距离避免键盘遮挡输入框单位rpx默认200
  51. * @event {Function} change 输入框内容发生变化时触发对象形式
  52. * @event {Function} blur 输入框失去焦点时触发对象形式
  53. * @event {Function} minus 点击减少按钮时触发(按钮可点击情况下)对象形式
  54. * @event {Function} plus 点击增加按钮时触发(按钮可点击情况下)对象形式
  55. * @example <u-number-box :min="1" :max="100"></u-number-box>
  56. */
  57. export default {
  58. name: "u-number-box",
  59. props: {
  60. // 预显示的数字
  61. value: {
  62. type: Number,
  63. default: 1
  64. },
  65. // 背景颜色
  66. bgColor: {
  67. type: String,
  68. default: '#F2F3F5'
  69. },
  70. // 最小值
  71. min: {
  72. type: Number,
  73. default: 0
  74. },
  75. // 最大值
  76. max: {
  77. type: Number,
  78. default: 99999
  79. },
  80. // 步进值,每次加或减的值
  81. step: {
  82. type: Number,
  83. default: 1
  84. },
  85. // 是否禁用加减操作
  86. disabled: {
  87. type: Boolean,
  88. default: false
  89. },
  90. // input的字体大小,单位rpx
  91. size: {
  92. type: [Number, String],
  93. default: 26
  94. },
  95. // 加减图标的颜色
  96. color: {
  97. type: String,
  98. default: '#323233'
  99. },
  100. // input宽度,单位rpx
  101. inputWidth: {
  102. type: [Number, String],
  103. default: 80
  104. },
  105. // input高度,单位rpx
  106. inputHeight: {
  107. type: [Number, String],
  108. default: 50
  109. },
  110. // index索引,用于列表中使用,让用户知道是哪个numberbox发生了变化,一般使用for循环出来的index值即可
  111. index: {
  112. type: [Number, String],
  113. default: ''
  114. },
  115. // 是否禁用输入框,与disabled作用于输入框时,为OR的关系,即想要禁用输入框,又可以加减的话
  116. // 设置disabled为false,disabledInput为true即可
  117. disabledInput: {
  118. type: Boolean,
  119. default: false
  120. },
  121. // 输入框于键盘之间的距离
  122. cursorSpacing: {
  123. type: [Number, String],
  124. default: 100
  125. },
  126. // 是否开启长按连续递增或递减
  127. longPress: {
  128. type: Boolean,
  129. default: true
  130. },
  131. // 开启长按触发后,每触发一次需要多久
  132. pressTime: {
  133. type: [Number, String],
  134. default: 250
  135. },
  136. // 是否只能输入大于或等于0的整数(正整数)
  137. positiveInteger: {
  138. type: Boolean,
  139. default: true
  140. }
  141. },
  142. watch: {
  143. value(v1, v2) {
  144. // 只有value的改变是来自外部的时候,才去同步inputVal的值,否则会造成循环错误
  145. if(!this.changeFromInner) {
  146. this.inputVal = v1;
  147. // 因为inputVal变化后,会触发this.handleChange(),在其中changeFromInner会再次被设置为true,
  148. // 造成外面修改值,也导致被认为是内部修改的混乱,这里进行this.$nextTick延时,保证在运行周期的最后处
  149. // 将changeFromInner设置为false
  150. this.$nextTick(function(){
  151. this.changeFromInner = false;
  152. })
  153. }
  154. },
  155. inputVal(v1, v2) {
  156. // 为了让用户能够删除所有输入值,重新输入内容,删除所有值后,内容为空字符串
  157. if (v1 == '') return;
  158. let value = 0;
  159. // 首先判断是否数值,并且在min和max之间,如果不是,使用原来值
  160. let tmp = this.$u.test.number(v1);
  161. if (tmp && v1 >= this.min && v1 <= this.max) value = v1;
  162. else value = v2;
  163. // 判断是否只能输入大于等于0的整数
  164. if(this.positiveInteger) {
  165. // 小于0,或者带有小数点,
  166. if(v1 < 0 || String(v1).indexOf('.') !== -1) {
  167. value = v2;
  168. // 双向绑定input的值,必须要使用$nextTick修改显示的值
  169. this.$nextTick(() => {
  170. this.inputVal = v2;
  171. })
  172. }
  173. }
  174. // 发出change事件
  175. this.handleChange(value, 'change');
  176. }
  177. },
  178. data() {
  179. return {
  180. inputVal: 1, // 输入框中的值,不能直接使用props中的value,因为应该改变props的状态
  181. timer: null, // 用作长按的定时器
  182. changeFromInner: false, // 值发生变化,是来自内部还是外部
  183. innerChangeTimer: null, // 内部定时器
  184. };
  185. },
  186. created() {
  187. this.inputVal = Number(this.value);
  188. },
  189. computed: {
  190. getCursorSpacing() {
  191. // 先将值转为px单位,再转为数值
  192. return Number(uni.upx2px(this.cursorSpacing));
  193. }
  194. },
  195. methods: {
  196. // 点击退格键
  197. btnTouchStart(callback) {
  198. // 先执行一遍方法,否则会造成松开手时,就执行了clearTimer,导致无法实现功能
  199. this[callback]();
  200. // 如果没开启长按功能,直接返回
  201. if (!this.longPress) return;
  202. clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
  203. this.timer = null;
  204. this.timer = setInterval(() => {
  205. // 执行加或减函数
  206. this[callback]();
  207. }, this.pressTime);
  208. },
  209. clearTimer() {
  210. this.$nextTick(() => {
  211. clearInterval(this.timer);
  212. this.timer = null;
  213. })
  214. },
  215. minus() {
  216. this.computeVal('minus');
  217. },
  218. plus() {
  219. this.computeVal('plus');
  220. },
  221. // 为了保证小数相加减出现精度溢出的问题
  222. calcPlus(num1, num2) {
  223. let baseNum, baseNum1, baseNum2;
  224. try {
  225. baseNum1 = num1.toString().split('.')[1].length;
  226. } catch (e) {
  227. baseNum1 = 0;
  228. }
  229. try {
  230. baseNum2 = num2.toString().split('.')[1].length;
  231. } catch (e) {
  232. baseNum2 = 0;
  233. }
  234. baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
  235. let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2; //精度
  236. return ((num1 * baseNum + num2 * baseNum) / baseNum).toFixed(precision);
  237. },
  238. // 为了保证小数相加减出现精度溢出的问题
  239. calcMinus(num1, num2) {
  240. let baseNum, baseNum1, baseNum2;
  241. try {
  242. baseNum1 = num1.toString().split('.')[1].length;
  243. } catch (e) {
  244. baseNum1 = 0;
  245. }
  246. try {
  247. baseNum2 = num2.toString().split('.')[1].length;
  248. } catch (e) {
  249. baseNum2 = 0;
  250. }
  251. baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
  252. let precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
  253. return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
  254. },
  255. computeVal(type) {
  256. uni.hideKeyboard();
  257. if (this.disabled) return;
  258. let value = 0;
  259. // 减
  260. if (type === 'minus') {
  261. value = this.calcMinus(this.inputVal, this.step);
  262. } else if (type === 'plus') {
  263. value = this.calcPlus(this.inputVal, this.step);
  264. }
  265. // 判断是否小于最小值和大于最大值
  266. if (value < this.min || value > this.max) {
  267. return;
  268. }
  269. this.inputVal = value;
  270. this.handleChange(value, type);
  271. },
  272. // 处理用户手动输入的情况
  273. onBlur(event) {
  274. let val = 0;
  275. let value = event.detail.value;
  276. // 如果为非0-9数字组成,或者其第一位数值为0,直接让其等于min值
  277. // 这里不直接判断是否正整数,是因为用户传递的props min值可能为0
  278. if (!/(^\d+$)/.test(value) || value[0] == 0) val = this.min;
  279. val = +value;
  280. if (val > this.max) {
  281. val = this.max;
  282. } else if (val < this.min) {
  283. val = this.min;
  284. }
  285. this.$nextTick(() => {
  286. this.inputVal = val;
  287. })
  288. this.handleChange(val, 'blur');
  289. },
  290. // 输入框获得焦点事件
  291. onFocus() {
  292. this.$emit('focus');
  293. },
  294. handleChange(value, type) {
  295. if (this.disabled) return;
  296. // 清除定时器,避免造成混乱
  297. if(this.innerChangeTimer) {
  298. clearTimeout(this.innerChangeTimer);
  299. this.innerChangeTimer = null;
  300. }
  301. // 发出input事件,修改通过v-model绑定的值,达到双向绑定的效果
  302. this.changeFromInner = true;
  303. // 一定时间内,清除changeFromInner标记,否则内部值改变后
  304. // 外部通过程序修改value值,将会无效
  305. this.innerChangeTimer = setTimeout(() => {
  306. this.changeFromInner = false;
  307. }, 150);
  308. this.$emit('input', Number(value));
  309. this.$emit(type, {
  310. // 转为Number类型
  311. value: Number(value),
  312. index: this.index
  313. })
  314. }
  315. }
  316. };
  317. </script>
  318. <style lang="scss" scoped>
  319. @import "../../libs/css/style.components.scss";
  320. .u-numberbox {
  321. display: inline-flex;
  322. align-items: center;
  323. }
  324. .u-number-input {
  325. position: relative;
  326. text-align: center;
  327. padding: 0;
  328. margin: 0 6rpx;
  329. @include vue-flex;
  330. align-items: center;
  331. justify-content: center;
  332. }
  333. .u-icon-plus,
  334. .u-icon-minus {
  335. width: 60rpx;
  336. @include vue-flex;
  337. justify-content: center;
  338. align-items: center;
  339. }
  340. .u-icon-plus {
  341. border-radius: 0 8rpx 8rpx 0;
  342. }
  343. .u-icon-minus {
  344. border-radius: 8rpx 0 0 8rpx;
  345. }
  346. .u-icon-disabled {
  347. color: #c8c9cc !important;
  348. background: #f7f8fa !important;
  349. }
  350. .u-input-disabled {
  351. color: #c8c9cc !important;
  352. background-color: #f2f3f5 !important;
  353. }
  354. </style>