index.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import { VantComponent } from '../common/component';
  2. import { iphonex } from '../mixins/iphonex';
  3. VantComponent({
  4. mixins: [iphonex],
  5. relation: {
  6. name: 'tabbar-item',
  7. type: 'descendant',
  8. linked: function linked(target) {
  9. var _this = this;
  10. this.data.items.push(target);
  11. setTimeout(function () {
  12. _this.setActiveItem();
  13. });
  14. },
  15. unlinked: function unlinked(target) {
  16. var _this2 = this;
  17. this.data.items = this.data.items.filter(function (item) {
  18. return item !== target;
  19. });
  20. setTimeout(function () {
  21. _this2.setActiveItem();
  22. });
  23. }
  24. },
  25. props: {
  26. active: Number,
  27. activeColor: String,
  28. fixed: {
  29. type: Boolean,
  30. value: true
  31. },
  32. zIndex: {
  33. type: Number,
  34. value: 1
  35. }
  36. },
  37. data: {
  38. items: [],
  39. currentActive: -1
  40. },
  41. watch: {
  42. active: function active(_active) {
  43. this.set({
  44. currentActive: _active
  45. });
  46. this.setActiveItem();
  47. }
  48. },
  49. created: function created() {
  50. this.set({
  51. currentActive: this.data.active
  52. });
  53. },
  54. methods: {
  55. setActiveItem: function setActiveItem() {
  56. var _this3 = this;
  57. this.data.items.forEach(function (item, index) {
  58. item.setActive({
  59. active: index === _this3.data.currentActive,
  60. color: _this3.data.activeColor
  61. });
  62. });
  63. },
  64. onChange: function onChange(child) {
  65. var active = this.data.items.indexOf(child);
  66. if (active !== this.data.currentActive && active !== -1) {
  67. this.$emit('change', active);
  68. this.set({
  69. currentActive: active
  70. });
  71. this.setActiveItem();
  72. }
  73. }
  74. }
  75. });