index.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /* eslint-disable object-shorthand */
  2. import { use } from '../utils';
  3. import { FindParentMixin } from '../mixins/find-parent';
  4. const [sfc, bem] = use('tab');
  5. export default sfc({
  6. mixins: [FindParentMixin],
  7. props: {
  8. title: String,
  9. disabled: Boolean
  10. },
  11. data() {
  12. return {
  13. inited: false
  14. };
  15. },
  16. computed: {
  17. index() {
  18. return this.parent.tabs.indexOf(this);
  19. },
  20. selected() {
  21. return this.index === this.parent.curActive;
  22. }
  23. },
  24. watch: {
  25. 'parent.curActive'() {
  26. this.inited = this.inited || this.selected;
  27. },
  28. title() {
  29. this.parent.setLine();
  30. }
  31. },
  32. created() {
  33. this.findParent('van-tabs');
  34. },
  35. mounted() {
  36. const { tabs } = this.parent;
  37. const index = this.parent.slots().indexOf(this.$vnode);
  38. tabs.splice(index === -1 ? tabs.length : index, 0, this);
  39. if (this.slots('title')) {
  40. this.parent.renderTitle(this.$refs.title, this.index);
  41. }
  42. },
  43. beforeDestroy() {
  44. this.parent.tabs.splice(this.index, 1);
  45. },
  46. render(h) {
  47. const { slots } = this;
  48. const shouldRender = this.inited || !this.parent.lazyRender;
  49. return (
  50. <div vShow={this.selected || this.parent.animated} class={bem('pane')}>
  51. {shouldRender ? slots() : h()}
  52. {slots('title') && <div ref="title">{slots('title')}</div>}
  53. </div>
  54. );
  55. }
  56. });