index.js 4.7KB

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