362ae0c8b588356630b81e42ead7e39658b82349078f39efbfc1a9a100237464749f59dee1f0f158d6eb6b14d009a26d7dc220fd1bb4c852b0ae2ab869fd7e 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <div
  3. class="el-tab-pane"
  4. v-if="(!lazy || loaded) || active"
  5. v-show="active"
  6. role="tabpanel"
  7. :aria-hidden="!active"
  8. :id="`pane-${paneName}`"
  9. :aria-labelledby="`tab-${paneName}`"
  10. >
  11. <slot></slot>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name: 'ElTabPane',
  17. componentName: 'ElTabPane',
  18. props: {
  19. label: String,
  20. labelContent: Function,
  21. name: String,
  22. closable: Boolean,
  23. disabled: Boolean,
  24. lazy: Boolean
  25. },
  26. data() {
  27. return {
  28. index: null,
  29. loaded: false
  30. };
  31. },
  32. computed: {
  33. isClosable() {
  34. return this.closable || this.$parent.closable;
  35. },
  36. active() {
  37. const active = this.$parent.currentName === (this.name || this.index);
  38. if (active) {
  39. this.loaded = true;
  40. }
  41. return active;
  42. },
  43. paneName() {
  44. return this.name || this.index;
  45. }
  46. },
  47. updated() {
  48. this.$parent.$emit('tab-nav-update');
  49. }
  50. };
  51. </script>