uni-app封装 tabs 标签选择器

最新推荐文章于 2024-06-02 17:40:24 发布

Destinynever

最新推荐文章于 2024-06-02 17:40:24 发布

阅读量680

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_57399113/article/details/125146571

版权

<template>
  <view class="container">
    <view class="tab-container">
      <view class="tab-item" v-for="(item, index) in props.tabList" :key="index">
        <view class="title" @click="change(index)" :class="{ active: props.current == index }">{{ item.title }}</view>
        <view class="line" v-if="props.current == index"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, reactive } from 'vue'

const props = defineProps({
  tabList: {
    type: Object,
  },
  current: {
    type: String,
  },
  color: {
    type: String,
  },
  activeColor: {
    type: String,
  },
  weight: {
    type: String,
  },
})
const emit = defineEmits(['update:current'])

const change = function (index: any) {
  emit('update:current', index)
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  .tab-container {
    display: flex;
    width: 60%;
    justify-content: space-between;
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        color: v-bind('props.color');
      }
      .line {
        margin-top: 5px;
        background-color: v-bind('props.activeColor');
        width: 18px;
        height: 2px;
        border-radius: 6px 6px 6px 6px;
      }
    }
  }
  .active {
    font-weight: v-bind('props.weight');
    color: v-bind('props.activeColor') !important;
  }
}
</style>

使用

    <nav-tab :tabList="data.tabList" v-model:current="data.current" color="#30a2a1" activeColor="#ffffff" weight="bold"> </nav-tab>
    <view class="content">
      <view v-if="data.current == 0">微心愿</view>
      <view v-if="data.current == 1">微志愿</view>
      <view v-if="data.current == 2">微智力</view>
    </view>