u-picker.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. "use strict";
  2. const common_vendor = require("../../../../common/vendor.js");
  3. const _sfc_main = {
  4. name: "u-picker",
  5. mixins: [common_vendor.mpMixin, common_vendor.mixin, common_vendor.props$20],
  6. data() {
  7. return {
  8. // 上一次选择的列索引
  9. lastIndex: [],
  10. // 索引值 ,对应picker-view的value
  11. innerIndex: [],
  12. // 各列的值
  13. innerColumns: [],
  14. // 上一次的变化列索引
  15. columnIndex: 0
  16. };
  17. },
  18. watch: {
  19. // 监听默认索引的变化,重新设置对应的值
  20. defaultIndex: {
  21. immediate: true,
  22. handler(n) {
  23. this.setIndexs(n, true);
  24. }
  25. },
  26. // 监听columns参数的变化
  27. columns: {
  28. immediate: true,
  29. deep: true,
  30. handler(n) {
  31. this.setColumns(n);
  32. }
  33. }
  34. },
  35. emits: ["close", "cancel", "confirm", "change"],
  36. methods: {
  37. // 获取item需要显示的文字,判别为对象还是文本
  38. getItemText(item) {
  39. if (common_vendor.index.$u.test.object(item)) {
  40. return item[this.keyName];
  41. } else {
  42. return item;
  43. }
  44. },
  45. // 关闭选择器
  46. closeHandler() {
  47. if (this.closeOnClickOverlay) {
  48. this.$emit("close");
  49. }
  50. },
  51. // 点击工具栏的取消按钮
  52. cancel() {
  53. this.$emit("cancel");
  54. },
  55. // 点击工具栏的确定按钮
  56. confirm() {
  57. this.$emit("confirm", {
  58. indexs: this.innerIndex,
  59. value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
  60. values: this.innerColumns
  61. });
  62. },
  63. // 选择器某一列的数据发生变化时触发
  64. changeHandler(e) {
  65. const {
  66. value
  67. } = e.detail;
  68. let index = 0, columnIndex = 0;
  69. for (let i = 0; i < value.length; i++) {
  70. let item = value[i];
  71. if (item !== (this.lastIndex[i] || 0)) {
  72. columnIndex = i;
  73. index = item;
  74. break;
  75. }
  76. }
  77. this.columnIndex = columnIndex;
  78. const values = this.innerColumns;
  79. this.setLastIndex(value);
  80. this.setIndexs(value);
  81. this.$emit("change", {
  82. value: this.innerColumns.map((item, index2) => item[value[index2]]),
  83. index,
  84. indexs: value,
  85. // values为当前变化列的数组内容
  86. values,
  87. columnIndex
  88. });
  89. },
  90. // 设置index索引,此方法可被外部调用设置
  91. setIndexs(index, setLastIndex) {
  92. this.innerIndex = common_vendor.index.$u.deepClone(index);
  93. if (setLastIndex) {
  94. this.setLastIndex(index);
  95. }
  96. },
  97. // 记录上一次的各列索引位置
  98. setLastIndex(index) {
  99. this.lastIndex = common_vendor.index.$u.deepClone(index);
  100. },
  101. // 设置对应列选项的所有值
  102. setColumnValues(columnIndex, values) {
  103. this.innerColumns.splice(columnIndex, 1, values);
  104. let tmpIndex = common_vendor.index.$u.deepClone(this.innerIndex);
  105. for (let i = 0; i < this.innerColumns.length; i++) {
  106. if (i > this.columnIndex) {
  107. tmpIndex[i] = 0;
  108. }
  109. }
  110. this.setIndexs(tmpIndex);
  111. },
  112. // 获取对应列的所有选项
  113. getColumnValues(columnIndex) {
  114. (async () => {
  115. await common_vendor.index.$u.sleep();
  116. })();
  117. return this.innerColumns[columnIndex];
  118. },
  119. // 设置整体各列的columns的值
  120. setColumns(columns) {
  121. console.log(columns);
  122. this.innerColumns = common_vendor.index.$u.deepClone(columns);
  123. if (this.innerIndex.length === 0) {
  124. this.innerIndex = new Array(columns.length).fill(0);
  125. }
  126. },
  127. // 获取各列选中值对应的索引
  128. getIndexs() {
  129. return this.innerIndex;
  130. },
  131. // 获取各列选中的值
  132. getValues() {
  133. (async () => {
  134. await common_vendor.index.$u.sleep();
  135. })();
  136. return this.innerColumns.map((item, index) => item[this.innerIndex[index]]);
  137. }
  138. }
  139. };
  140. if (!Array) {
  141. const _easycom_u_toolbar2 = common_vendor.resolveComponent("u-toolbar");
  142. const _easycom_u_loading_icon2 = common_vendor.resolveComponent("u-loading-icon");
  143. const _easycom_u_popup2 = common_vendor.resolveComponent("u-popup");
  144. (_easycom_u_toolbar2 + _easycom_u_loading_icon2 + _easycom_u_popup2)();
  145. }
  146. const _easycom_u_toolbar = () => "../u-toolbar/u-toolbar.js";
  147. const _easycom_u_loading_icon = () => "../u-loading-icon/u-loading-icon.js";
  148. const _easycom_u_popup = () => "../u-popup/u-popup.js";
  149. if (!Math) {
  150. (_easycom_u_toolbar + _easycom_u_loading_icon + _easycom_u_popup)();
  151. }
  152. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  153. return common_vendor.e({
  154. a: _ctx.showToolbar
  155. }, _ctx.showToolbar ? {
  156. b: common_vendor.o($options.cancel),
  157. c: common_vendor.o($options.confirm),
  158. d: common_vendor.p({
  159. cancelColor: _ctx.cancelColor,
  160. confirmColor: _ctx.confirmColor,
  161. cancelText: _ctx.cancelText,
  162. confirmText: _ctx.confirmText,
  163. title: _ctx.title
  164. })
  165. } : {}, {
  166. e: common_vendor.f($data.innerColumns, (item, index, i0) => {
  167. return common_vendor.e({
  168. a: _ctx.$u.test.array(item)
  169. }, _ctx.$u.test.array(item) ? {
  170. b: common_vendor.f(item, (item1, index1, i1) => {
  171. return {
  172. a: common_vendor.t($options.getItemText(item1)),
  173. b: index1,
  174. c: index1 === $data.innerIndex[index] ? "bold" : "normal"
  175. };
  176. }),
  177. c: _ctx.$u.addUnit(_ctx.itemHeight),
  178. d: _ctx.$u.addUnit(_ctx.itemHeight)
  179. } : {}, {
  180. e: index
  181. });
  182. }),
  183. f: `height: ${_ctx.$u.addUnit(_ctx.itemHeight)}`,
  184. g: $data.innerIndex,
  185. h: _ctx.immediateChange,
  186. i: `${_ctx.$u.addUnit(_ctx.visibleItemCount * _ctx.itemHeight)}`,
  187. j: common_vendor.o((...args) => $options.changeHandler && $options.changeHandler(...args)),
  188. k: _ctx.loading
  189. }, _ctx.loading ? {
  190. l: common_vendor.p({
  191. mode: "circle"
  192. })
  193. } : {}, {
  194. m: common_vendor.o($options.closeHandler),
  195. n: common_vendor.p({
  196. show: _ctx.show
  197. })
  198. });
  199. }
  200. const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1500ce68"], ["__file", "F:/兴元/开门柜项目/平台端管理系统小程序/node_modules/uview-plus/components/u-picker/u-picker.vue"]]);
  201. wx.createComponent(Component);