inner-tabs.js 1006 B

12345678910111213141516171819202122232425262728293031323334353637
  1. Vue.component('inner-tabs', {
  2. template: '<div>\
  3. <ul class="nav nav-tabs service-nav-tabs">\
  4. <li v-for="(tab,index) in tabs" role="presentation" :class="{active: (activeidx == index)}">\
  5. <a @click="load(tab, index)">{{tab.title}}</a>\
  6. </li>\
  7. </ul>\
  8. <div class="inner-main" style="height: calc(100% - 40px);overflow:hidden;">\
  9. <iframe :src="url" width="100%" height="100%" frameborder="0" seamless style="display: inline"></iframe>\
  10. </div>\
  11. </div>',
  12. props: ["tabs","activeidx"],
  13. data: function() {
  14. return {
  15. url: ""
  16. }
  17. },
  18. methods: {
  19. load: function(tab, index) {
  20. // top.GlobalEventBus.$emit("active-inner-tabs."+this.namespce, tab)
  21. this.url = tab.href
  22. this.activeidx = index
  23. },
  24. activeTab: function(index) {
  25. // this.activeidx = index
  26. // this.url = this.tabs[this.activeidx].href
  27. // this.load(this.tabs[index], index)
  28. }
  29. },
  30. mounted: function() {
  31. },
  32. watch: {
  33. activeidx: function(idx) {
  34. this.url = this.tabs[idx].href
  35. }
  36. }
  37. })