index.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. import { VantComponent } from '../common/component';
  2. import { pickerProps } from './shared';
  3. VantComponent({
  4. classes: ['active-class', 'toolbar-class', 'column-class'],
  5. props: Object.assign(Object.assign({}, pickerProps), {
  6. valueKey: {
  7. type: String,
  8. value: 'text',
  9. },
  10. toolbarPosition: {
  11. type: String,
  12. value: 'top',
  13. },
  14. defaultIndex: {
  15. type: Number,
  16. value: 0,
  17. },
  18. columns: {
  19. type: Array,
  20. value: [],
  21. observer(columns = []) {
  22. this.simple = columns.length && !columns[0].values;
  23. this.children = this.selectAllComponents('.van-picker__column');
  24. if (Array.isArray(this.children) && this.children.length) {
  25. this.setColumns().catch(() => {});
  26. }
  27. },
  28. },
  29. }),
  30. beforeCreate() {
  31. this.children = [];
  32. },
  33. methods: {
  34. noop() {},
  35. setColumns() {
  36. const { data } = this;
  37. const columns = this.simple ? [{ values: data.columns }] : data.columns;
  38. const stack = columns.map((column, index) =>
  39. this.setColumnValues(index, column.values)
  40. );
  41. return Promise.all(stack);
  42. },
  43. emit(event) {
  44. const { type } = event.currentTarget.dataset;
  45. if (this.simple) {
  46. this.$emit(type, {
  47. value: this.getColumnValue(0),
  48. index: this.getColumnIndex(0),
  49. });
  50. } else {
  51. this.$emit(type, {
  52. value: this.getValues(),
  53. index: this.getIndexes(),
  54. });
  55. }
  56. },
  57. onChange(event) {
  58. if (this.simple) {
  59. this.$emit('change', {
  60. picker: this,
  61. value: this.getColumnValue(0),
  62. index: this.getColumnIndex(0),
  63. });
  64. } else {
  65. this.$emit('change', {
  66. picker: this,
  67. value: this.getValues(),
  68. index: event.currentTarget.dataset.index,
  69. });
  70. }
  71. },
  72. // get column instance by index
  73. getColumn(index) {
  74. return this.children[index];
  75. },
  76. // get column value by index
  77. getColumnValue(index) {
  78. const column = this.getColumn(index);
  79. return column && column.getValue();
  80. },
  81. // set column value by index
  82. setColumnValue(index, value) {
  83. const column = this.getColumn(index);
  84. if (column == null) {
  85. return Promise.reject(new Error('setColumnValue: 对应列不存在'));
  86. }
  87. return column.setValue(value);
  88. },
  89. // get column option index by column index
  90. getColumnIndex(columnIndex) {
  91. return (this.getColumn(columnIndex) || {}).data.currentIndex;
  92. },
  93. // set column option index by column index
  94. setColumnIndex(columnIndex, optionIndex) {
  95. const column = this.getColumn(columnIndex);
  96. if (column == null) {
  97. return Promise.reject(new Error('setColumnIndex: 对应列不存在'));
  98. }
  99. return column.setIndex(optionIndex);
  100. },
  101. // get options of column by index
  102. getColumnValues(index) {
  103. return (this.children[index] || {}).data.options;
  104. },
  105. // set options of column by index
  106. setColumnValues(index, options, needReset = true) {
  107. const column = this.children[index];
  108. if (column == null) {
  109. return Promise.reject(new Error('setColumnValues: 对应列不存在'));
  110. }
  111. const isSame =
  112. JSON.stringify(column.data.options) === JSON.stringify(options);
  113. if (isSame) {
  114. return Promise.resolve();
  115. }
  116. return column.set({ options }).then(() => {
  117. if (needReset) {
  118. column.setIndex(0);
  119. }
  120. });
  121. },
  122. // get values of all columns
  123. getValues() {
  124. return this.children.map((child) => child.getValue());
  125. },
  126. // set values of all columns
  127. setValues(values) {
  128. const stack = values.map((value, index) =>
  129. this.setColumnValue(index, value)
  130. );
  131. return Promise.all(stack);
  132. },
  133. // get indexes of all columns
  134. getIndexes() {
  135. return this.children.map((child) => child.data.currentIndex);
  136. },
  137. // set indexes of all columns
  138. setIndexes(indexes) {
  139. const stack = indexes.map((optionIndex, columnIndex) =>
  140. this.setColumnIndex(columnIndex, optionIndex)
  141. );
  142. return Promise.all(stack);
  143. },
  144. },
  145. });