index.js 5.9 KB

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