index.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var component_1 = require('../common/component');
  4. var utils_1 = require('../common/utils');
  5. var DEFAULT_DURATION = 200;
  6. component_1.VantComponent({
  7. classes: ['active-class'],
  8. props: {
  9. valueKey: String,
  10. className: String,
  11. itemHeight: Number,
  12. visibleItemCount: Number,
  13. initialOptions: {
  14. type: Array,
  15. value: [],
  16. },
  17. defaultIndex: {
  18. type: Number,
  19. value: 0,
  20. observer: function (value) {
  21. this.setIndex(value);
  22. },
  23. },
  24. },
  25. data: {
  26. startY: 0,
  27. offset: 0,
  28. duration: 0,
  29. startOffset: 0,
  30. options: [],
  31. currentIndex: 0,
  32. },
  33. created: function () {
  34. var _this = this;
  35. var _a = this.data,
  36. defaultIndex = _a.defaultIndex,
  37. initialOptions = _a.initialOptions;
  38. this.set({
  39. currentIndex: defaultIndex,
  40. options: initialOptions,
  41. }).then(function () {
  42. _this.setIndex(defaultIndex);
  43. });
  44. },
  45. methods: {
  46. getCount: function () {
  47. return this.data.options.length;
  48. },
  49. onTouchStart: function (event) {
  50. this.setData({
  51. startY: event.touches[0].clientY,
  52. startOffset: this.data.offset,
  53. duration: 0,
  54. });
  55. },
  56. onTouchMove: function (event) {
  57. var data = this.data;
  58. var deltaY = event.touches[0].clientY - data.startY;
  59. this.setData({
  60. offset: utils_1.range(
  61. data.startOffset + deltaY,
  62. -(this.getCount() * data.itemHeight),
  63. data.itemHeight
  64. ),
  65. });
  66. },
  67. onTouchEnd: function () {
  68. var data = this.data;
  69. if (data.offset !== data.startOffset) {
  70. this.setData({ duration: DEFAULT_DURATION });
  71. var index = utils_1.range(
  72. Math.round(-data.offset / data.itemHeight),
  73. 0,
  74. this.getCount() - 1
  75. );
  76. this.setIndex(index, true);
  77. }
  78. },
  79. onClickItem: function (event) {
  80. var index = event.currentTarget.dataset.index;
  81. this.setIndex(index, true);
  82. },
  83. adjustIndex: function (index) {
  84. var data = this.data;
  85. var count = this.getCount();
  86. index = utils_1.range(index, 0, count);
  87. for (var i = index; i < count; i++) {
  88. if (!this.isDisabled(data.options[i])) return i;
  89. }
  90. for (var i = index - 1; i >= 0; i--) {
  91. if (!this.isDisabled(data.options[i])) return i;
  92. }
  93. },
  94. isDisabled: function (option) {
  95. return utils_1.isObj(option) && option.disabled;
  96. },
  97. getOptionText: function (option) {
  98. var data = this.data;
  99. return utils_1.isObj(option) && data.valueKey in option
  100. ? option[data.valueKey]
  101. : option;
  102. },
  103. setIndex: function (index, userAction) {
  104. var _this = this;
  105. var data = this.data;
  106. index = this.adjustIndex(index) || 0;
  107. var offset = -index * data.itemHeight;
  108. if (index !== data.currentIndex) {
  109. return this.set({ offset: offset, currentIndex: index }).then(
  110. function () {
  111. userAction && _this.$emit('change', index);
  112. }
  113. );
  114. }
  115. return this.set({ offset: offset });
  116. },
  117. setValue: function (value) {
  118. var options = this.data.options;
  119. for (var i = 0; i < options.length; i++) {
  120. if (this.getOptionText(options[i]) === value) {
  121. return this.setIndex(i);
  122. }
  123. }
  124. return Promise.resolve();
  125. },
  126. getValue: function () {
  127. var data = this.data;
  128. return data.options[data.currentIndex];
  129. },
  130. },
  131. });