mosowe-tab-select 可选tab栏

uniapp/uni_modules组件

下载地址

依赖组件

uni-datetime-picker、uni-data-picker、uni-popup、uni-icons

兼容性

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

props

属性	类型	说明	默认
list	listItem[]	数据项列表	[]
col	booelan	是否垂直排列	false
scrollX	boolean	是否水平滚动	false
selectColor	string	选中颜色	#131936

listItem

属性	类型	说明
key	string	希望返回的数据中的键名，【唯一】
type	'picker' / 'cascade'/ 'multiple'/ 'calendar'/ 'other'	选项类型
title	string	默认文案
titleRightIcon	string	col时，标题右侧按钮字体图标
titleLeftIcon	string	col时，标题左侧按钮字体图标
icon	string	非col时，标题右侧图标，col时行右侧图标，支持字体/本地/网络
selectIcon	string	点击/选中时图标，字体/本地/网络，类型需和icon一致
multiplePopupTitle	string	multiple多选时，弹框的顶部标题
selectKey	string	picker，multiple， 查询key，即需要获取的值的key，默认id
defaultSelect	string/array	默认值，undefind,null,''表示没有初始值，有些组件默认值是字符串/数字，有的是数组，根据实际情况写
treeChidKey	string	cascade级联树结构子集键名称
placeholder	string	col垂直排列时右侧默认提示语
disabled	boolean	是否禁止选择,col垂直排列有效
slot	string	该项插槽名，注意微信小程序兼容问题
options	options	组件相关的其他配置，透传对应的组件props
hide	boolean	是否隐藏该项

options

属性	类型	说明
range	any[]	picker，multiple的列表选项
range-key	string	picker，multiple的展示项键，默认label
mode	'selector' /'multiSelector' / 'time' / 'date'	picker的mode属性
type	'date' / 'daterange' / 'datetime'/ 'datetimerange'	calendar日历的type属性
localdata	any	cascade级联的树形数据列表，本地数据，没有懒加载功能
map	{ text: string; value: string }	级联组件的map属性
其他	string	其他属性

emits

事件名	说明
change	组件数据改变时：(data,key)=>void
columnchange	多列picker列数据改变事件：(data)=>void
click	other类型点击事件：(data)=>void
clickTitleIcon	col时，标题左右图标点击事件：(type: 'right'|'left')=>void
nodeclick	级联组件节点点击事件：(data)=>void

slots

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

示例代码

<template>
  <mosowe-tab-select
    :list="list"
    @change="selectChange"
  ></mosowe-tab-select>
</template>

<script setup lang="ts">
  const list = [
    {
      key: 'status',
      title: '单选',
      type: 'picker',
      options: {
        'range-key': 'label',
        range: [
          {
            label: '请选择',
            id: ''
          },
          {
            label: '已处理',
            id: 'finish'
          },
          {
            label: '待处理',
            id: 'wait'
          }
        ]
      }
    },
    {
      key: 'time',
      title: '时间选择',
      type: 'picker',
      options: {
        mode: 'time'
      }
    },
    {
      key: 'date',
      title: '日期选择',
      type: 'picker',
      options: {
        mode: 'date'
      }
    }
  ];
  const selectChange = (data: any) => {
    console.log(data);
  };
</script>

贡献者

mosowe