index.js 3.6 KB

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