inner-tabs.js 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. Vue.component('inner-tabs', {
  2. template: '<div class="full-height">\
  3. <nav class="inner-tabs" style="height: 38px;">\
  4. <div class="tab-wrap clearfix">\
  5. <a @click="load(tab, index)" :class="{active: (activeidx == index)}" href="javascript:void(0)" v-for="(tab,index) in tabs">{{tab.title}}</a>\
  6. </div>\
  7. </nav>\
  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","namespce"],
  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. })