index.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { VantComponent } from '../common/component';
  2. VantComponent({
  3. relation: {
  4. name: 'tabbar-item',
  5. type: 'descendant',
  6. linked(target) {
  7. this.children.push(target);
  8. target.parent = this;
  9. target.updateFromParent();
  10. },
  11. unlinked(target) {
  12. this.children = this.children.filter((item) => item !== target);
  13. this.updateChildren();
  14. }
  15. },
  16. props: {
  17. active: {
  18. type: null,
  19. observer: 'updateChildren'
  20. },
  21. activeColor: {
  22. type: String,
  23. observer: 'updateChildren'
  24. },
  25. inactiveColor: {
  26. type: String,
  27. observer: 'updateChildren'
  28. },
  29. fixed: {
  30. type: Boolean,
  31. value: true
  32. },
  33. border: {
  34. type: Boolean,
  35. value: true
  36. },
  37. zIndex: {
  38. type: Number,
  39. value: 1
  40. },
  41. safeAreaInsetBottom: {
  42. type: Boolean,
  43. value: true
  44. }
  45. },
  46. beforeCreate() {
  47. this.children = [];
  48. },
  49. methods: {
  50. updateChildren() {
  51. const { children } = this;
  52. if (!Array.isArray(children) || !children.length) {
  53. return Promise.resolve();
  54. }
  55. return Promise.all(children.map((child) => child.updateFromParent()));
  56. },
  57. onChange(child) {
  58. const index = this.children.indexOf(child);
  59. const active = child.data.name || index;
  60. if (active !== this.data.active) {
  61. this.$emit('change', active);
  62. }
  63. }
  64. }
  65. });