TabSelect 配送时间

基本用法

  1. <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. <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. 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