nutui-uniapp

Appearance

TimeSelect 配送时间 ​

介绍 ​

用于配送时间选择

基础用法 ​

html
<template>
  <nut-cell @click="handleClick1">
    <span><label>请选择配送时间</label></span>
  </nut-cell>
  <nut-time-select v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
    <template #pannel>
      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-time-pannel>
      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-time-pannel>
    </template>
    <template #detail>
      <nut-time-detail :times="times1" @select="selectTime1"></nut-time-detail>
    </template>
  </nut-time-select>
</template>
<script lang="ts">
  import { reactive, toRefs, onMounted } from 'vue';
  export default {
    props: {},
    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) => {
        console.log(`您选择了：${JSON.stringify(obj)}`);
      };

      onMounted(() => {
        state.currentTime1.push({
          key: state.currentKey1,
          list: []
        });
      });

      return {
        ...toRefs(state),
        handleChange1,
        handleSelected1,
        selectTime1,
        handleClick1,
      };
    }
  };
</script>

可选择多个日期时间 ​

html
<template>
  <nut-cell @click="handleClick2">
    <span><label>请选择配送时间</label></span>
  </nut-cell>
  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
    <template #pannel>
      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
    </template>
    <template #detail>
      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
    </template>
  </nut-time-select>
</template>
<script lang="ts">
  import { reactive, toRefs, onMounted } from 'vue';
  export default {
    props: {},
    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) => {
        console.log(`您选择了：${JSON.stringify(obj)}`);
      };

      onMounted(() => {
        state.currentTime2.push({
          key: state.currentKey2,
          list: []
        });
      });

      return {
        ...toRefs(state),
        handleChange2,
        handleSelected2,
        selectTime2,
        handleClick2,
      };
    }
  };
</script>

更改标题 ​

html
<template>
  <nut-cell @click="handleClick2">
    <span><label>请选择配送时间</label></span>
  </nut-cell>
  <nut-time-select v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
    <template #title>
      <div class="timeselect-title">
        <p class="title">我是标题</p>
        <p class="subtitle">我是副标题</p>
      </div>
    </template>
    <template #pannel>
      <nut-time-pannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-time-pannel>
      <nut-time-pannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-time-pannel>
    </template>
    <template #detail>
      <nut-time-detail :times="times2" @select="selectTime2"></nut-time-detail>
    </template>
  </nut-time-select>
</template>
<script lang="ts">
  import { reactive, toRefs, onMounted } from 'vue';
  export default {
    props: {},
    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) => {
        console.log(`您选择了：${JSON.stringify(obj)}`);
      };

      onMounted(() => {
        state.currentTime2.push({
          key: state.currentKey2,
          list: []
        });
      });

      return {
        ...toRefs(state),
        handleChange2,
        handleSelected2,
        selectTime2,
        handleClick2,
      };
    }
  };
</script>
<style lang="scss">
.timeselect-title {
  height: 50px;
  p {
    line-height: 1;
    padding: 0;
    margin: 0;
    &.title {
      margin: 10px 0;
      font-size: 16px;
      font-weight: bold;
    }
    &.subtitle {
      color: #999;
    }
  }
}
</style>

API ​

TimeSelect Props ​

参数说明类型默认值
visible是否显示弹层booleanfalse
height弹层的高度string20%
title弹层标题string取件时间
current-key唯一标识string | number0
current-time当前选择的时间，数组元素包含🔑 string; list: string[]Array[]
lock-scroll H5背景是否锁定booleantrue

Slots ​

名称说明
title更改标题
pannel左侧列表
detail右侧详细内容

TimePannel Props ​

参数说明类型默认值
name显示的名称string``
pannel-key唯一标识，和 current-key一起标识当前选择的天string | number0

TimeDetail Props ​

参数说明类型默认值
times可选择的时间，数组元素同 current-timeArray[]

TimeSelect Event ​

事件名说明回调参数
select关闭遮罩之后的回调key: string | number, list: []

TimePannel Event ​

事件名说明回调参数
change点击内容的回调pannelKey: string \｜ number

TimeDetail Event ​

事件名说明回调参数
select点击时间的回调time: string

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-timeselect-title-font-sizevar(--nut-font-size-2)
--nut-timeselect-title-colorvar(--nut-title-color)
--nut-timeselect-title-width100%
--nut-timeselect-title-height50px
--nut-timeselect-title-line-height50px
--nut-timeselect-pannel-bg-color#f6f7f9
--nut-timeselect-timepannel-text-colorvar(--nut-title-color2)
--nut-timeselect-timepannel-font-sizevar(--nut-font-size-2)
--nut-timeselect-timepannel-cur-bg-colorvar(--nut-white)
--nut-timeselect-timepannel-cur-text-color#333333
--nut-timeselect-timepannel-width140px
--nut-timeselect-timepannel-height40px
--nut-timeselect-timepannel-padding15px
--nut-timeselect-timedetail-padding0 5px 50px 13px
--nut-timeselect-timedetail-item-width100px
--nut-timeselect-timedetail-item-height50px
--nut-timeselect-timedetail-item-line-height50px
--nut-timeselect-timedetail-item-bg-color#f6f7f9
--nut-timeselect-timedetail-item-border-radius5px
--nut-timeselect-timedetail-item-text-color#333333
--nut-timeselect-timedetail-item-text-font-sizevar(--nut-font-size-2)
--nut-timeselect-timedetail-item-cur-bg-colorvar(--nut-primary-color)
--nut-timeselect-timedetail-item-cur-bordervar(--nut-primary-color)
--nut-timeselect-timedetail-item-cur-text-colorvar(--nut-primary-color)

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者