【uniapp手写组件】分页面板

uniapp分页面板组件：

<template>
  <div class="tab-container">
    <div class="tab-nav">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{
          'tab-nav-item': true,
          'active': activeIndex === index
        }"
        @click="handleTabClick(index)"
      >
        {{tab.title}}
      </div>
    </div>
    <div class="tab-contents">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{
          'tab-content': true,
          'active': activeIndex === index
        }"
      >
        <slot :name="tab.name"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabContainer',
  props: {
    tabs: {
      type: Array,
      required: true
    },
    defaultActiveIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeIndex: this.defaultActiveIndex
    }
  },
  methods: {
    handleTabClick (index) {
      this.activeIndex = index
    }
  }
}
</script>

<style>
.tab-container {
  display: flex;
  flex-direction: column;
}

.tab-nav {
  display: flex;
  background-color: #f0f0f0;
}

.tab-nav-item {
  padding: 10px;
  cursor: pointer;
}

.tab-nav-item.active {
  color: white;
  background-color: #333;
}

.tab-contents {
  display: flex;
}

.tab-content {
  flex: 1;
  display: none;
}

.tab-content.active {
  display: flex;
}
</style>

使用方法：

在需要使用分页面板的页面中，先引入组件：

<template>
  <div class="page">
    <TabContainer :tabs="tabs">
      <div slot="tab0">
        这是第一个页面
      </div>
      <div slot="tab1">
        这是第二个页面
      </div>
      <div slot="tab2">
        这是第三个页面
      </div>
    </TabContainer>
  </div>
</template>

<script>
import TabContainer from '@/components/TabContainer.vue'

export default {
  name: 'MyPage',
  components: {
    TabContainer
  },
  data () {
    return {
      tabs: [
        {
          title: '页面1',
          name: 'tab0'
        },
        {
          title: '页面2',
          name: 'tab1'
        },
        {
          title: '页面3',
          name: 'tab2'
        }
      ]
    }
  }
}
</script>

这个例子中，页面中有三个分页面板，分别对应三个不同的页面，使用 slot 标签，将分页面板中的每一个页面传递进去。在 tabs 属性中配置每个页面对应的标题和名称。