index.js 4.8 KB

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