AI销管
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.
 
 
 
 

364 lines
11 KiB

  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>