index.js 3.2 KB

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