index.js 4.1 KB

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