dk-stepper.js 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. const Constants = require("@/utils/Constants");
  2. // components/dkbase/dk-stepper/dk-stepper.js
  3. Component({
  4. /**
  5. * 组件的属性列表
  6. */
  7. properties: {
  8. // 设置数字部分显示宽度
  9. inputWidth: {
  10. type: String,
  11. value: "32px"
  12. },
  13. value: {
  14. type: Number,
  15. observer: function (newVal) {
  16. this.setData({
  17. dataValue: newVal
  18. })
  19. }
  20. },
  21. min: {
  22. type: Number
  23. },
  24. decimalLength:{
  25. type: Number
  26. },
  27. step: {
  28. type: Number,
  29. value: 1
  30. },
  31. readonly: {
  32. type: Boolean,
  33. value: false
  34. },
  35. },
  36. /**
  37. * 组件的初始数据
  38. */
  39. data: {
  40. inputTimer: null,
  41. dataValue: null,
  42. max: 0
  43. },
  44. /**
  45. * 组件的方法列表
  46. */
  47. methods: {
  48. /**
  49. * 步进器数值改变
  50. * @author 刘尧
  51. */
  52. changeStep(e) {
  53. this.setData({
  54. dataValue: e.detail.inputValue,
  55. })
  56. // 触发自定义事件
  57. this.triggerEvent('change', this.data.dataValue);
  58. },
  59. /**
  60. * @desc : 减法
  61. * @author : 周兴
  62. * @date : 2024/2/2 11:46
  63. */
  64. handleMinus() {
  65. let dataValue = this.data.dataValue
  66. let min = this.data.min
  67. dataValue = dataValue - this.data.step
  68. if(dataValue < 0){
  69. min = min * -1
  70. }
  71. // 当数值计算后小于最大值或大于最小值都可以触发减法
  72. if (dataValue >= min) {
  73. this.setData({
  74. dataValue: dataValue,
  75. })
  76. }
  77. // 触发自定义事件
  78. this.triggerEvent('change', this.data.dataValue);
  79. },
  80. /**
  81. * @desc : 加法
  82. * @author : 周兴
  83. * @date : 2024/2/2 11:46
  84. */
  85. handlePlus() {
  86. let dataValue = this.data.dataValue
  87. let max = this.data.max
  88. dataValue = dataValue + this.data.step
  89. if (dataValue <= max) {
  90. this.setData({
  91. dataValue: dataValue,
  92. })
  93. }
  94. // 触发自定义事件
  95. this.triggerEvent('change', this.data.dataValue);
  96. },
  97. },
  98. })