index.js 3.7 KB

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