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.

u-number-box.vue 9.3 KiB

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