index.js 4.8KB

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