index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  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. }
  21. },
  22. data: {
  23. startY: 0,
  24. offset: 0,
  25. duration: 0,
  26. startOffset: 0,
  27. options: [],
  28. currentIndex: 0
  29. },
  30. created: function () {
  31. var _this = this;
  32. var _a = this.data, defaultIndex = _a.defaultIndex, initialOptions = _a.initialOptions;
  33. this.set({
  34. currentIndex: defaultIndex,
  35. options: initialOptions
  36. }).then(function () {
  37. _this.setIndex(defaultIndex);
  38. });
  39. },
  40. computed: {
  41. count: function () {
  42. return this.data.options.length;
  43. },
  44. baseOffset: function () {
  45. var data = this.data;
  46. return (data.itemHeight * (data.visibleItemCount - 1)) / 2;
  47. },
  48. wrapperStyle: function () {
  49. var data = this.data;
  50. return [
  51. "transition: " + data.duration + "ms",
  52. "transform: translate3d(0, " + (data.offset + data.baseOffset) + "px, 0)",
  53. "line-height: " + data.itemHeight + "px"
  54. ].join('; ');
  55. }
  56. },
  57. watch: {
  58. defaultIndex: function (value) {
  59. this.setIndex(value);
  60. }
  61. },
  62. methods: {
  63. onTouchStart: function (event) {
  64. this.set({
  65. startY: event.touches[0].clientY,
  66. startOffset: this.data.offset,
  67. duration: 0
  68. });
  69. },
  70. onTouchMove: function (event) {
  71. var data = this.data;
  72. var deltaY = event.touches[0].clientY - data.startY;
  73. this.set({
  74. offset: utils_1.range(data.startOffset + deltaY, -(data.count * data.itemHeight), data.itemHeight)
  75. });
  76. },
  77. onTouchEnd: function () {
  78. var data = this.data;
  79. if (data.offset !== data.startOffset) {
  80. this.set({
  81. duration: DEFAULT_DURATION
  82. });
  83. var index = utils_1.range(Math.round(-data.offset / data.itemHeight), 0, data.count - 1);
  84. this.setIndex(index, true);
  85. }
  86. },
  87. onClickItem: function (event) {
  88. var index = event.currentTarget.dataset.index;
  89. this.setIndex(index, true);
  90. },
  91. adjustIndex: function (index) {
  92. var data = this.data;
  93. index = utils_1.range(index, 0, data.count);
  94. for (var i = index; i < data.count; i++) {
  95. if (!this.isDisabled(data.options[i]))
  96. return i;
  97. }
  98. for (var i = index - 1; i >= 0; i--) {
  99. if (!this.isDisabled(data.options[i]))
  100. return i;
  101. }
  102. },
  103. isDisabled: function (option) {
  104. return utils_1.isObj(option) && option.disabled;
  105. },
  106. getOptionText: function (option) {
  107. var data = this.data;
  108. return utils_1.isObj(option) && data.valueKey in option
  109. ? option[data.valueKey]
  110. : option;
  111. },
  112. setIndex: function (index, userAction) {
  113. var _this = this;
  114. var data = this.data;
  115. index = this.adjustIndex(index) || 0;
  116. var offset = -index * data.itemHeight;
  117. if (index !== data.currentIndex) {
  118. return this.set({ offset: offset, currentIndex: index }).then(function () {
  119. userAction && _this.$emit('change', index);
  120. });
  121. }
  122. return this.set({ offset: offset });
  123. },
  124. setValue: function (value) {
  125. var options = this.data.options;
  126. for (var i = 0; i < options.length; i++) {
  127. if (this.getOptionText(options[i]) === value) {
  128. return this.setIndex(i);
  129. }
  130. }
  131. return Promise.resolve();
  132. },
  133. getValue: function () {
  134. var data = this.data;
  135. return data.options[data.currentIndex];
  136. }
  137. }
  138. });