index.js 6.4 KB

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