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