chelvc-custom/src/components/base-tabs/base-tabs.vue

<!--
 ****--@date 2024-06-10 14:46:00
 ****--@author yizhiyang
 ****--@description base tabs
-->
<template>
  <view class="base-tabs">
    <u-tabs
      :list="list"
      @click="handleClick"
      :lineWidth="lineWidth"
      lineColor="#215ebe"
      :activeStyle="activeStyle"
      :inactiveStyle="inactiveStyle"
      :itemStyle="itemStyle"
      :scrollable="true"
    ></u-tabs>
  </view>
</template>

<script>
export default {
  name: 'base-tabs',
  props: {
    list: {
      type: Array,
      default: [],
    },
    height: {
      type: String,
      default: '88rpx',
    },
    lineWidth: {
      type: Number,
      default: 30,
    },
    paddingLeft: {
      type: String,
      default: '0px',
    },
    paddingRight: {
      type: String,
      default: '0px',
    },
  },
  computed: {
    activeStyle() {
      return {
        color: '#215ebe',
        fontWeight: 'bold',
      };
    },
    inactiveStyle() {
      return {
        color: '#333333',
        transform: 'scale(1)',
      };
    },
    itemStyle() {
      let { height, paddingLeft, paddingRight } = this;
      return {
        height,
        paddingLeft,
        paddingRight,
      };
    },
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
};
</script>