TabSelect 分类选择请使用手机扫码体验

基本用法

  1. html
    <nut-tabselect
  2.   :mainTitle="mainTitle"
  3.   :subTitle="subTitle"
  4.   :defaultContent="defaultContent"
  5.   :tabList="tabList"
  6.   :show="show"
  7.   @close="show = false"
  8.   @choose="choose"
  9.   @onOkBtn="onOkBtn"
  10.   :multiple="false"
  11.   :isDefaultSelected="true"
  12. ></nut-tabselect>

基本用法（多选模式）

  1. html
    <nut-tabselect
  2.   :mainTitle="mainTitle"
  3.   :subTitle="subTitle"
  4.   :defaultContent="defaultContent"
  5.   :tabList="tabList"
  6.   :show="show"
  7.   @close="show = false"
  8.   @choose="choose"
  9.   @onOkBtn="onOkBtn"
  10.   :multiple="true"
  11.   :max="3"
  12. ></nut-tabselect>
  1. javascript
    export default {
  2.   components: {},
  3.   data() {
  4.     return {
  5.       mainTitle: "配送",
  6.       subTitle: "送达时间",
  7.       defaultContent: [
  8.         "9:00——10:00",
  9.         "10:00——11:00",
  10.         "11:00——12:00",
  11.         "12:00——13:00",
  12.         "13:00——15:00",
  13.         "15:00——17:00",
  14.         "17:00——19:00",
  15.       ],
  16.       tabList: [
  17.         {
  18.           tabTitle: "京东快递", // 一级tab标题
  19.           children: [
  20.             // 一级tab内容
  21.             {
  22.               tabTitle: "1月13日 (星期一)", // 二级tab标题
  23.               content: [
  24.                 // 二级tab内容，不传默认使用defaultContent字段
  25.                 "11:00——12:00",
  26.                 "12:00——13:00",
  27.                 "13:00——15:00",
  28.                 "15:00——17:00",
  29.                 "17:00——19:00",
  30.               ],
  31.             },
  32.             {
  33.               tabTitle: "1月14日 (星期二)",
  34.             },
  35.             {
  36.               tabTitle: "1月15日 (星期三)",
  37.             },
  38.             {
  39.               tabTitle: "1月16日 (星期四)",
  40.             },
  41.             {
  42.               tabTitle: "1月17日 (星期五)",
  43.             },
  44.             {
  45.               tabTitle: "1月18日 (星期六)",
  46.             },
  47.             {
  48.               tabTitle: "1月19日 (星期天)",
  49.             },
  50.           ],
  51.         },
  52.         {
  53.           tabTitle: "上门自提",
  54.           children: [
  55.             {
  56.               tabTitle: "2月13日 (星期一)",
  57.               content: ["13:00——15:00", "15:00——17:00", "17:00——19:00"],
  58.             },
  59.             {
  60.               tabTitle: "2月14日 (星期二)",
  61.             },
  62.             {
  63.               tabTitle: "2月15日 (星期三)",
  64.             },
  65.             {
  66.               tabTitle: "2月16日 (星期四)",
  67.             },
  68.             {
  69.               tabTitle: "2月17日 (星期五)",
  70.             },
  71.             {
  72.               tabTitle: "2月18日 (星期六)",
  73.             },
  74.             {
  75.               tabTitle: "2月19日 (星期天)",
  76.             },
  77.           ],
  78.         },
  79.       ],
  80.       show: false,
  81.     };
  82.   },
  83.   methods: {
  84.     choose(title, item) {
  85.       console.log(title, item);
  86.     },
  87.     onOkBtn(event) {
  88.       console.log(event);
  89.     },
  90.   },
  91. };

Prop

字段说明类型默认值
mainTitle一级 tab 标题String‘’
subTitle二级 tab 标题String‘’
defaultContent二级 tab 下内容完全一致时传Arraynull
multiple是否允许多选Booleanfalse
tabList整体数据Arraynull
show是否显示Booleanfalse
max多选时最多可选个数NumberInfinity
isDefaultSelected单选时是否默认选中第一项（多选默认不选中）Booleanfalse
isLockBgScroll是否锁定背景滚动Booleantrue

Event

事件名称说明回调参数
choose切换页签或选中某一项点击的一级 tab ，二级 tab ，选中项内容
onOkBtn确定按钮回调Event
close组件隐藏时—

TabSelect 分类选择 - 图1