index.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import { VantComponent } from '../common/component';
  2. var FieldName;
  3. (function (FieldName) {
  4. FieldName["TEXT"] = "text";
  5. FieldName["VALUE"] = "value";
  6. FieldName["CHILDREN"] = "children";
  7. })(FieldName || (FieldName = {}));
  8. const defaultFieldNames = {
  9. text: FieldName.TEXT,
  10. value: FieldName.VALUE,
  11. children: FieldName.CHILDREN,
  12. };
  13. VantComponent({
  14. props: {
  15. title: String,
  16. value: {
  17. type: String,
  18. observer: 'updateValue',
  19. },
  20. placeholder: {
  21. type: String,
  22. value: '请选择',
  23. },
  24. activeColor: {
  25. type: String,
  26. value: '#1989fa',
  27. },
  28. options: {
  29. type: Array,
  30. value: [],
  31. observer: 'updateOptions',
  32. },
  33. swipeable: {
  34. type: Boolean,
  35. value: false,
  36. },
  37. closeable: {
  38. type: Boolean,
  39. value: true,
  40. },
  41. showHeader: {
  42. type: Boolean,
  43. value: true,
  44. },
  45. closeIcon: {
  46. type: String,
  47. value: 'cross',
  48. },
  49. fieldNames: {
  50. type: Object,
  51. value: defaultFieldNames,
  52. observer: 'updateFieldNames',
  53. },
  54. },
  55. data: {
  56. tabs: [],
  57. activeTab: 0,
  58. textKey: FieldName.TEXT,
  59. valueKey: FieldName.VALUE,
  60. childrenKey: FieldName.CHILDREN,
  61. },
  62. created() {
  63. this.updateTabs();
  64. },
  65. methods: {
  66. updateOptions(val, oldVal) {
  67. const isAsync = !!(val.length && oldVal.length);
  68. this.updateTabs(isAsync);
  69. },
  70. updateValue(val) {
  71. if (val !== undefined) {
  72. const values = this.data.tabs.map((tab) => tab.selected && tab.selected[this.data.valueKey]);
  73. if (values.indexOf(val) > -1) {
  74. return;
  75. }
  76. }
  77. this.updateTabs();
  78. },
  79. updateFieldNames() {
  80. const { text = 'text', value = 'value', children = 'children', } = this.data.fieldNames || defaultFieldNames;
  81. this.setData({
  82. textKey: text,
  83. valueKey: value,
  84. childrenKey: children,
  85. });
  86. },
  87. getSelectedOptionsByValue(options, value) {
  88. for (let i = 0; i < options.length; i++) {
  89. const option = options[i];
  90. if (option[this.data.valueKey] === value) {
  91. return [option];
  92. }
  93. if (option[this.data.childrenKey]) {
  94. const selectedOptions = this.getSelectedOptionsByValue(option[this.data.childrenKey], value);
  95. if (selectedOptions) {
  96. return [option, ...selectedOptions];
  97. }
  98. }
  99. }
  100. },
  101. updateTabs(isAsync = false) {
  102. const { options, value } = this.data;
  103. if (value !== undefined) {
  104. const selectedOptions = this.getSelectedOptionsByValue(options, value);
  105. if (selectedOptions) {
  106. let optionsCursor = options;
  107. const tabs = selectedOptions.map((option) => {
  108. const tab = {
  109. options: optionsCursor,
  110. selected: option,
  111. };
  112. const next = optionsCursor.find((item) => item[this.data.valueKey] === option[this.data.valueKey]);
  113. if (next) {
  114. optionsCursor = next[this.data.childrenKey];
  115. }
  116. return tab;
  117. });
  118. if (optionsCursor) {
  119. tabs.push({
  120. options: optionsCursor,
  121. selected: null,
  122. });
  123. }
  124. this.setData({
  125. tabs,
  126. });
  127. wx.nextTick(() => {
  128. this.setData({
  129. activeTab: tabs.length - 1,
  130. });
  131. });
  132. return;
  133. }
  134. }
  135. // 异步更新
  136. if (isAsync) {
  137. const { tabs } = this.data;
  138. tabs[tabs.length - 1].options =
  139. options[options.length - 1][this.data.childrenKey];
  140. this.setData({
  141. tabs,
  142. });
  143. return;
  144. }
  145. this.setData({
  146. tabs: [
  147. {
  148. options,
  149. selected: null,
  150. },
  151. ],
  152. });
  153. },
  154. onClose() {
  155. this.$emit('close');
  156. },
  157. onClickTab(e) {
  158. const { index: tabIndex, title } = e.detail;
  159. this.$emit('click-tab', { title, tabIndex });
  160. this.setData({
  161. activeTab: tabIndex,
  162. });
  163. },
  164. // 选中
  165. onSelect(e) {
  166. const { option, tabIndex } = e.currentTarget.dataset;
  167. if (option && option.disabled) {
  168. return;
  169. }
  170. const { valueKey, childrenKey } = this.data;
  171. let { tabs } = this.data;
  172. tabs[tabIndex].selected = option;
  173. if (tabs.length > tabIndex + 1) {
  174. tabs = tabs.slice(0, tabIndex + 1);
  175. }
  176. if (option[childrenKey]) {
  177. const nextTab = {
  178. options: option[childrenKey],
  179. selected: null,
  180. };
  181. if (tabs[tabIndex + 1]) {
  182. tabs[tabIndex + 1] = nextTab;
  183. }
  184. else {
  185. tabs.push(nextTab);
  186. }
  187. wx.nextTick(() => {
  188. this.setData({
  189. activeTab: tabIndex + 1,
  190. });
  191. });
  192. }
  193. this.setData({
  194. tabs,
  195. });
  196. const selectedOptions = tabs.map((tab) => tab.selected).filter(Boolean);
  197. const params = {
  198. value: option[valueKey],
  199. tabIndex,
  200. selectedOptions,
  201. };
  202. this.$emit('change', params);
  203. if (!option[childrenKey]) {
  204. this.$emit('finish', params);
  205. }
  206. },
  207. },
  208. });