VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

栏目: IT技术 · 发布时间: 4年前

内容简介:作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的。可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类似功能,并分享了出来,百度到的结果不甚理想,他们大都是一个空间通过传入对象数据实现的,扩展性差,不能分别定制每个页面的样式。改用谷歌,发现一位国外老哥实现了我想要的功能,果断采用,并给了他一个大大的赞。如果需要,可以直接参考他在codepen上的代码:

作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的。

可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类似功能,并分享了出来,百度到的结果不甚理想,他们大都是一个空间通过传入对象数据实现的,扩展性差,不能分别定制每个页面的样式。

改用谷歌,发现一位国外老哥实现了我想要的功能,果断采用,并给了他一个大大的赞。如果需要,可以直接参考他在codepen上的代码: https://codepen.io/tatimblin/pen/oWKdjR?editors=1010

把这个代码稍加修改,就成了我的的啦,已经点过赞,就不用不好意思,大胆使用就好,效果如下:

VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

两个VUE组件,就可以实现其功能,一个是tabs组件,一个是tab组件。左侧tabs组件取名为:WidgetTabs.vue, 右侧tabs组件取名为PageTabs.vue,他们的孩子使用共同的组件:Tab.vue。这样做的目的主要想在tab容器控制并区分样式。代码结构:

VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

详细介绍一个实现WidgetTabs, 另外一个类似,直接复制即可。

调用代码:

<WidgetTabs>
  <tab name="Studio" :selected="true">
    <h1>Studio Content</h1>
  </tab>
  <tab name="Files">
    <h1>Files List</h1>
  </tab>
  <tab name="Others">
    <h1>Other Content</h1>
  </tab>
</WidgetTabs>

容器代码:

<template>
  <div>
    <ul >
      <li v-for="tab in tabs" :class="{ 'active': tab.isActive }" 
        @click="selectTab(tab)">
          {{ tab.name }}
      </li>
    </ul>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WidgetTabs',
  data() {
    return {tabs: [] };
  },
  
  created() {
    this.tabs = this.$children;
  },
  methods: {
    selectTab(selectedTab) {
      this.tabs.forEach(tab => {
        tab.isActive = (tab.name == selectedTab.name);
      });
    }
  }
}
</script>

具体tab代码:

<template>
  <div v-show="isActive">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    name: { required: true },
    selected: { default: false}
  },
  data() {
    return {
      isActive: false
    };
  },
    
  mounted() {
    this.isActive = this.selected;
  }
}
</script>

整个项目在这个历史节点的代码,请到我的Github上查看: https://github.com/vularsoft/studio-ui

找到该历史节点的方法:

VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容

RXEditor是一个Boostrap代码可视化编辑工具,本系列记录了该软件的开发过程,有问题的朋友请在ithub上给我留言。


以上所述就是小编给大家介绍的《VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

妙趣横生的算法(C++语言实现)

妙趣横生的算法(C++语言实现)

胡浩 / 清华大学出版社 / 2014-10-1 / 59.80元

《妙趣横生的算法(C++语言实现)》内容丰富,生动有趣,寓教于乐,旨在帮助读者学习数据结构和算法的相关知识,从而开阔眼界,培养编程兴趣,提高编程能力,增强求职的竞争力。如果您想提高自己对算法和数据结构的理解能力,在程序设计之路上走得更远,那么请翻开《妙趣横生的算法(C++语言实现)》,仔细研读吧,它将助您一臂之力。 《妙趣横生的算法(C++语言实现)》以通俗易懂的语言深入浅出地介绍了常用的数......一起来看看 《妙趣横生的算法(C++语言实现)》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具