vue tab组件

最新推荐文章于 2025-05-07 12:47:58 发布

转载最新推荐文章于 2025-05-07 12:47:58 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/210357/blog/1647378

文章标签：

#javascript #python #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

用vue写的无限自定义tab组件，好些tab组件都是定义了数量或内容格式。感觉不能作为通用组件，写一个数量、内容不限的组件，样式使用的weui。直接上代码 #tab组件

<template lang="html">
<div class="weui-tab">
  <div class="weui-navbar">
    <div v-for="(item,index) in navbars" :class="{'weui-bar__item_on':selNavIndex===index}" @click="selNavIndex=index" class="weui-navbar__item ">{{item}}</div>
  </div>
  <div class="weui-tab__panel">
    <slot :selidx="selNavIndex" >
    </slot>
  </div>
</div>
</template>

<script>
export default {
  props: {
    navbars: {
      type: Array,
      default: () => {
        return ['tab1', 'tab2']
      }
    },
    defIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      selNavIndex: this.defIndex
    }
  }
}
</script>

#父组件,data:tabs默认值['xxx1','xxx2'],tabsIndex默认值0

<div>
<tab :navbars="tabs" :defIndex="tabsIndex">
      <template slot-scope="props">
              <div v-if="props.selidx===0">  <!-- 0\1为tabs对应下标  -->
                <!--    自己随便写内容 -->
               </div>
                 <div v-if="props.selidx===1">
                    <!--    自己随便写内容 -->
               </div>
      </template>
    </tab>
</div>

主要用到了slot-scope属性在父组件接受tab组件的选择项

转载于:https://my.oschina.net/u/210357/blog/1647378