index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { use } from '../utils';
  3. import { preventDefault } from '../utils/event';
  4. import { deepClone } from '../utils/deep-clone';
  5. import { pickerProps } from './shared';
  6. import Loading from '../loading';
  7. import PickerColumn from './PickerColumn';
  8. var _use = use('picker'),
  9. sfc = _use[0],
  10. bem = _use[1],
  11. t = _use[2];
  12. export default sfc({
  13. props: _extends({}, pickerProps, {
  14. columns: Array,
  15. defaultIndex: {
  16. type: Number,
  17. "default": 0
  18. },
  19. valueKey: {
  20. type: String,
  21. "default": 'text'
  22. }
  23. }),
  24. data: function data() {
  25. return {
  26. children: []
  27. };
  28. },
  29. computed: {
  30. simple: function simple() {
  31. return this.columns.length && !this.columns[0].values;
  32. }
  33. },
  34. watch: {
  35. columns: function columns() {
  36. this.setColumns();
  37. }
  38. },
  39. methods: {
  40. setColumns: function setColumns() {
  41. var _this = this;
  42. var columns = this.simple ? [{
  43. values: this.columns
  44. }] : this.columns;
  45. columns.forEach(function (column, index) {
  46. _this.setColumnValues(index, deepClone(column.values));
  47. });
  48. },
  49. emit: function emit(event) {
  50. if (this.simple) {
  51. this.$emit(event, this.getColumnValue(0), this.getColumnIndex(0));
  52. } else {
  53. this.$emit(event, this.getValues(), this.getIndexes());
  54. }
  55. },
  56. onChange: function onChange(columnIndex) {
  57. if (this.simple) {
  58. this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
  59. } else {
  60. this.$emit('change', this, this.getValues(), columnIndex);
  61. }
  62. },
  63. // get column instance by index
  64. getColumn: function getColumn(index) {
  65. return this.children[index];
  66. },
  67. // get column value by index
  68. getColumnValue: function getColumnValue(index) {
  69. var column = this.getColumn(index);
  70. return column && column.getValue();
  71. },
  72. // set column value by index
  73. setColumnValue: function setColumnValue(index, value) {
  74. var column = this.getColumn(index);
  75. column && column.setValue(value);
  76. },
  77. // get column option index by column index
  78. getColumnIndex: function getColumnIndex(columnIndex) {
  79. return (this.getColumn(columnIndex) || {}).currentIndex;
  80. },
  81. // set column option index by column index
  82. setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
  83. var column = this.getColumn(columnIndex);
  84. column && column.setIndex(optionIndex);
  85. },
  86. // get options of column by index
  87. getColumnValues: function getColumnValues(index) {
  88. return (this.children[index] || {}).options;
  89. },
  90. // set options of column by index
  91. setColumnValues: function setColumnValues(index, options) {
  92. var column = this.children[index];
  93. if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
  94. column.options = options;
  95. column.setIndex(0);
  96. }
  97. },
  98. // get values of all columns
  99. getValues: function getValues() {
  100. return this.children.map(function (child) {
  101. return child.getValue();
  102. });
  103. },
  104. // set values of all columns
  105. setValues: function setValues(values) {
  106. var _this2 = this;
  107. values.forEach(function (value, index) {
  108. _this2.setColumnValue(index, value);
  109. });
  110. },
  111. // get indexes of all columns
  112. getIndexes: function getIndexes() {
  113. return this.children.map(function (child) {
  114. return child.currentIndex;
  115. });
  116. },
  117. // set indexes of all columns
  118. setIndexes: function setIndexes(indexes) {
  119. var _this3 = this;
  120. indexes.forEach(function (optionIndex, columnIndex) {
  121. _this3.setColumnIndex(columnIndex, optionIndex);
  122. });
  123. },
  124. onConfirm: function onConfirm() {
  125. this.emit('confirm');
  126. },
  127. onCancel: function onCancel() {
  128. this.emit('cancel');
  129. }
  130. },
  131. render: function render(h) {
  132. var _this4 = this;
  133. var itemHeight = this.itemHeight;
  134. var columns = this.simple ? [this.columns] : this.columns;
  135. var frameStyle = {
  136. height: itemHeight + "px"
  137. };
  138. var columnsStyle = {
  139. height: itemHeight * this.visibleItemCount + "px"
  140. };
  141. var Toolbar = this.showToolbar && h("div", {
  142. "class": ['van-hairline--top-bottom', bem('toolbar')]
  143. }, [this.slots() || [h("div", {
  144. "class": bem('cancel'),
  145. "on": {
  146. "click": this.onCancel
  147. }
  148. }, [this.cancelButtonText || t('cancel')]), this.slots('title') || this.title && h("div", {
  149. "class": ['van-ellipsis', bem('title')]
  150. }, [this.title]), h("div", {
  151. "class": bem('confirm'),
  152. "on": {
  153. "click": this.onConfirm
  154. }
  155. }, [this.confirmButtonText || t('confirm')])]]);
  156. return h("div", {
  157. "class": bem()
  158. }, [Toolbar, this.loading ? h("div", {
  159. "class": bem('loading')
  160. }, [h(Loading)]) : h(), h("div", {
  161. "class": bem('columns'),
  162. "style": columnsStyle,
  163. "on": {
  164. "touchmove": preventDefault
  165. }
  166. }, [columns.map(function (item, index) {
  167. return h(PickerColumn, {
  168. "attrs": {
  169. "valueKey": _this4.valueKey,
  170. "className": item.className,
  171. "itemHeight": _this4.itemHeight,
  172. "defaultIndex": item.defaultIndex || _this4.defaultIndex,
  173. "visibleItemCount": _this4.visibleItemCount,
  174. "initialOptions": _this4.simple ? item : item.values
  175. },
  176. "on": {
  177. "change": function change() {
  178. _this4.onChange(index);
  179. }
  180. }
  181. });
  182. }), h("div", {
  183. "class": ['van-hairline--top-bottom', bem('frame')],
  184. "style": frameStyle
  185. })])]);
  186. }
  187. });