index.js 1.7KB

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