import{e as a,o as n,y as t}from"./vendor.js";const l={class:"markdown-body"},e=t(`

TimeSelect \u914D\u9001\u65F6\u95F4

\u4ECB\u7ECD

\u7528\u4E8E\u914D\u9001\u65F6\u95F4\u9009\u62E9

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { TimeSelect, TimePannel, TimeDetail, Popup } from '@nutui/nutui';
// taro
import { TimeSelect, TimePannel, TimeDetail, Popup } from '@nutui/nutui-taro';

const app = createApp();
app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);

\u57FA\u672C\u7528\u6CD5

<nut-timeselect v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
  <template #pannel>
    <nut-timepannel name="2\u670823\u65E5(\u4ECA\u5929)" pannel-key="0" @change="handleChange1"></nut-timepannel>
    <nut-timepannel name="2\u670824\u65E5(\u661F\u671F\u4E09)" pannel-key="1" @change="handleChange1"></nut-timepannel>
  </template>
  <template #detail>
    <nut-timedetail :times="times1" @select="selectTime1"></nut-timedetail>
  </template>
</nut-timeselect>

setup() {
    const state = reactive({
      visible1: false,
      currentKey1: 0,
      currentTime1: [] as any[],
      times1: [
        {
          key: 0,
          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
        },
        {
          key: 1,
          list: ['9:00-10:00', '10:00-11:00']
        },
      ],
    });

    const handleChange1 = (pannelKey: number) => {
      state.currentKey1 = pannelKey;
      state.currentTime1 = [];
      state.currentTime1.push({
        key: state.currentKey1,
        list: []
      });
    };

    const handleClick1 = () => {
      state.visible1 = true;
    };

    const selectTime1 = (item: string) => {
      let curTimeIndex = state.currentTime1[0]['list'].findIndex((time: string) => time === item);
      if(curTimeIndex === -1) {
        state.currentTime1[0]['list'].push(item);
      } else {
        state.currentTime1[0]['list'].splice(curTimeIndex, 1);
      }
    };

    const handleSelected1 = (obj: any) => {
      proxy.$toast.text(\`\u60A8\u9009\u62E9\u4E86\uFF1A\${JSON.stringify(obj)}\`);
    };

    return { 
      ...toRefs(state), 
      handleChange1,
      handleSelected1,
      selectTime1,
      handleClick1, 
    };
  }

\u53EF\u9009\u62E9\u591A\u4E2A\u65E5\u671F\u65F6\u95F4

<nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
  <template #pannel>
    <nut-timepannel name="2\u670823\u65E5(\u4ECA\u5929)" pannel-key="0" @change="handleChange2"></nut-timepannel>
    <nut-timepannel name="2\u670824\u65E5(\u661F\u671F\u4E09)" pannel-key="1" @change="handleChange2"></nut-timepannel>
  </template>
  <template #detail>
    <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
  </template>
</nut-timeselect>

setup() {
    const state = reactive({
      visible2: false,
      currentKey2: 0,
      currentTime2: [] as any[],
      times2: [
        {
          key: 0,
          list: ['9:00-10:00', '10:00-11:00', '11:00-12:00']
        },
        {
          key: 1,
          list: ['9:00-10:00', '10:00-11:00']
        },
      ]
    });

    const handleChange2 = (pannelKey: number) => {
      state.currentKey2 = pannelKey;
      let curTime = state.currentTime2.find((item: any) => item.key == pannelKey);
      if(!curTime) {
        state.currentTime2.push({
          key: pannelKey,
          list: []
        });
      }
    };

    const handleClick2 = () => {
      state.visible2 = true;
    };

    const selectTime2 = (item: string) => {
      let findIndex = state.currentTime2.findIndex((item: any) => item.key == state.currentKey2);
      let curTimeIndex = state.currentTime2[findIndex]['list'].findIndex((time: string) => time === item);
      if(curTimeIndex === -1) {
        state.currentTime2[findIndex]['list'].push(item);
      } else {
        state.currentTime2[findIndex]['list'].splice(curTimeIndex, 1);
      }
    };

    const handleSelected2 = (obj: any) => {
      proxy.$toast.text(\`\u60A8\u9009\u62E9\u4E86\uFF1A\${JSON.stringify(obj)}\`);
    };

    return { 
      ...toRefs(state), 
      handleChange2,
      handleSelected2,
      selectTime2,
      handleClick2, 
    };
  }

API

TimeSelect Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
visible	\u662F\u5426\u663E\u793A\u5F39\u5C42	Boolean	`false`
height	\u5F39\u5C42\u7684\u9AD8\u5EA6	String	`20%`
title	\u5F39\u5C42\u6807\u9898	String	`\u53D6\u4EF6\u65F6\u95F4`
current-key	\u552F\u4E00\u6807\u8BC6	String\u3001Number	`0`
current-time	\u5F53\u524D\u9009\u62E9\u7684\u65F6\u95F4\uFF0C\u6570\u7EC4\u5143\u7D20\u5305\u542B:key: string; list: string[]	Array	`[]`

TimePannel Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
name	\u663E\u793A\u7684\u540D\u79F0	String	\`\`
pannel-key	\u552F\u4E00\u6807\u8BC6\uFF0C\u548C current-key\u4E00\u8D77\u6807\u8BC6\u5F53\u524D\u9009\u62E9\u7684\u5929	Number\u3001String	`0`

TimeDetail Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
times	\u53EF\u9009\u62E9\u7684\u65F6\u95F4\uFF0C\u6570\u7EC4\u5143\u7D20\u540C `current-time`	Array	`[]`

TimeSelect Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
select	\u5173\u95ED\u906E\u7F69\u4E4B\u540E\u7684\u56DE\u8C03	key: string

TimePannel Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u70B9\u51FB\u5185\u5BB9\u7684\u56DE\u8C03	pannelKey: string \uFF5C number

TimeDetail Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
select	\u70B9\u51FB\u65F6\u95F4\u7684\u56DE\u8C03	time: string

`,24),p=[e],d={setup(c,{expose:s}){return s({frontmatter:{}}),(r,i)=>(n(),a("div",l,p))}};export{d as default};