mosowe-tab 标签组组件

uniapp/uni_modules组件

下载地址

兼容性

平台	android	ios	微信小程序	H5
兼容	√	√	√	√

props

属性	类型	说明	默认
list	TabsListItem[]	列表	-
modelValue	string | number	v-model值
color	string	默认字体颜色	rgba(19, 25, 54, 0.50)
selectColor	string	选中字体颜色	#131936
selectBottomColor	string	选中底部条颜色	#6CCEAE
selectIconColor	string	选中Icon颜色	#6CCEAE
hideBottom	boolean	是否隐藏底部条	false
isSticky	boolean	是否吸顶	false
center	boolean	是否居中	false
around	boolean	是否居中且均分布局	false
iconRightTop	boolean	图标右上角展示	false

TabsListItem

属性	类型	说明
label	string	标签文案
value	string	标签值
icon	string	默认图标
selectIcon	string	选中图标

emits

事件名	说明
click	选中时触发事件，（item:TabsListItem,index:number）=> void

slots

插槽名	说明
default	作用域参数：{ item }

示例代码

<template>
  <view class="main-page">
    <mosowe-tab
      v-model="tabActive"
      :list="list"
    ></mosowe-tab>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const tabActive = ref('0');
  const list = [
    {
      label: '标签1',
      value: '0'
    },
    {
      label: '标签2',
      value: '1'
    }
  ];
</script>

贡献者

mosowe