index.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. Component({
  2. externalClasses: [
  3. 'l-class',
  4. 'l-symbol-class',
  5. 'l-count-class',
  6. 'l-disabled-class'
  7. ],
  8. properties: {
  9. count: {
  10. type: Number,
  11. value: 1
  12. },
  13. max: {
  14. type: Number,
  15. value: 9999
  16. },
  17. min: {
  18. type: Number,
  19. value: 1
  20. },
  21. step: {
  22. type: Number,
  23. value: 1
  24. },
  25. disabled: Boolean,
  26. iconSize: String,
  27. iconColor: String
  28. },
  29. /**
  30. * 组件的初始数据
  31. */
  32. data: {
  33. focus: false,
  34. result: 1
  35. },
  36. observers: {
  37. 'count,min,max': function () {
  38. this.valueRange(this.data.count, 'parameter');
  39. }
  40. },
  41. /**
  42. * 组件的方法列表
  43. */
  44. methods: {
  45. doNothing(e) {
  46. const { type } = e.currentTarget.dataset;
  47. this.triggerEvent('linout', { type, way: 'icon' }, {
  48. bubbles: true,
  49. composed: true
  50. });
  51. },
  52. onCount() {
  53. this.setData({
  54. focus: true
  55. });
  56. },
  57. onBlur(e) {
  58. this.setData({
  59. focus: false
  60. });
  61. let {
  62. value
  63. } = e.detail;
  64. setTimeout(() => {
  65. this.blurCount(Number(value), () => {
  66. this.data.count = this.data.result;
  67. this.triggerEvent('lintap', {
  68. count: this.data.result,
  69. type: 'blur'
  70. }, {
  71. bubbles: true,
  72. composed: true
  73. });
  74. });
  75. }, 50);
  76. },
  77. blurCount(value, callback) {
  78. if (value) {
  79. this.valueRange(value);
  80. } else {
  81. this.setData({
  82. result: this.properties.count
  83. });
  84. }
  85. callback && callback();
  86. },
  87. valueRange(value, way = 'input') {
  88. if (value > this.properties.max) {
  89. this.setData({
  90. result: this.properties.max
  91. }, () => {
  92. this.triggerEvent('linout', { type: 'overflow_max', way }, {
  93. bubbles: true,
  94. composed: true
  95. });
  96. });
  97. } else if (value < this.properties.min) {
  98. this.setData({
  99. result: this.properties.min
  100. }, () => {
  101. this.triggerEvent('linout', { type: 'overflow_min', way }, {
  102. bubbles: true,
  103. composed: true
  104. });
  105. });
  106. } else {
  107. this.setData({
  108. result: value
  109. });
  110. }
  111. },
  112. reduceTap() {
  113. let distance = this.data.count - this.properties.step;
  114. if (distance <= this.properties.min) {
  115. this.data.count = this.properties.min;
  116. } else {
  117. this.data.count -= this.properties.step;
  118. }
  119. this.setData({
  120. result: this.data.count
  121. });
  122. this.triggerEvent('lintap', {
  123. count: this.data.result,
  124. type: 'reduce'
  125. }, {
  126. bubbles: true,
  127. composed: true
  128. });
  129. },
  130. addTap() {
  131. let distance = this.data.count + this.properties.step;
  132. if (distance >= this.properties.max) {
  133. this.data.count = this.properties.max;
  134. } else {
  135. this.data.count += this.properties.step;
  136. }
  137. this.setData({
  138. result: this.data.count
  139. });
  140. this.triggerEvent('lintap', {
  141. count: this.data.result,
  142. type: 'add'
  143. }, {
  144. bubbles: true,
  145. composed: true
  146. });
  147. },
  148. }
  149. });