index.js 6.3 KB

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