feat(timeselect): 标题支持html

src/packages/__VUE/timeselect/demo.vue

@@ -42,6 +42,33 @@
         <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
       </template>
     </nut-timeselect>
+    <h2>{{ translate('changeTitle') }}</h2>
+    <nut-cell @click="handleClick3">
+      <span
+        ><label>{{ translate('deliveryTime') }}</label></span
+      >
+    </nut-cell>
+    <nut-timeselect
+      v-model:visible="visible3"
+      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-timepannel :name="translate('time1')" pannel-key="0" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel :name="translate('time2')" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      </template>
+      <template #detail>
+        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      </template>
+    </nut-timeselect>
   </div>
 </template>
 
@@ -54,6 +81,7 @@ useTranslate({
   'zh-CN': {
     basic: '基本用法',
     deliveryTime: '请选择配送时间',
+    changeTitle: '更改标题',
     time1: '2月23日(今天)',
     time2: '2月24日(星期三)',
     title: '可选择多个日期时间',
@@ -62,6 +90,7 @@ useTranslate({
   'en-US': {
     basic: 'Basic Usage',
     deliveryTime: 'Please select the delivery time',
+    changeTitle: 'Change Title',
     time1: 'February 23rd(Today)',
     time2: 'February 24th(Wednesday)',
     title: 'Multiple dates and times can be selected',
@@ -97,7 +126,8 @@ export default createDemo({
           key: 1,
           list: ['9:00-10:00', '10:00-11:00']
         }
-      ]
+      ],
+      visible3: false
     });
 
     const handleChange1 = (pannelKey: number) => {
@@ -123,7 +153,6 @@ export default createDemo({
     };
 
     const handleSelected1 = (obj: any) => {
-      console.log(123);
       proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
@@ -156,6 +185,10 @@ export default createDemo({
       proxy.$toast.text(`${translate('content')}：${JSON.stringify(obj)}`);
     };
 
+    const handleClick3 = () => {
+      state.visible3 = true;
+    };
+
     onMounted(() => {
       state.currentTime1.push({
         key: state.currentKey1,
@@ -177,6 +210,7 @@ export default createDemo({
       handleSelected2,
       selectTime2,
       handleClick2,
+      handleClick3,
       translate
     };
   }
@@ -185,5 +219,21 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .demo {
+  .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>

src/packages/__VUE/timeselect/doc.en-US.md

@@ -196,6 +196,123 @@ app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);
 
 :::
 
+### Change Title
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick2">
+    <span><label>Please select the delivery time</label></span>
+  </nut-cell>
+  <nut-timeselect v-model:visible="visible2" height="50%" :current-key="currentKey2" :current-time="currentTime2" @select="handleSelected2">
+    <template #title>
+      <div class="timeselect-title">
+        <p class="title">It is title</p>
+        <p class="subtitle">It is subtitle</p>
+      </div>
+    </template>
+    <template #pannel>
+      <nut-timepannel name="February 23rd(Today)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+      <nut-timepannel name="February 24th(Wednesday)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+    </template>
+    <template #detail>
+      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+    </template>
+  </nut-timeselect>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const { proxy } = getCurrentInstance() as any;
+      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(`Your Choose ：${JSON.stringify(obj)}`);
+      };
+
+      onMounted(() => {
+        state.currentTime2.push({
+          key: state.currentKey2,
+          list: []
+        });
+      });
+
+      return { 
+        ...toRefs(state), 
+        handleChange2,
+        handleSelected2,
+        selectTime2,
+        handleClick2, 
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+.demo {
+  .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 Prop
@@ -209,6 +326,14 @@ app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);
 | current-time                 | The currently selected time, the array element contains:key: string; list: string[]      | Array  | `[]`
 | lock-scroll            | Whether the background is locked                         | Boolean        | `false`       |
 
+### Slot
+
+| Attribute                   | Description                                                             |
+|------------------------|----------------------------------------------------------------|
+| title                 | Change Title                                                    |
+| pannel                 | List for left                                                    |
+| detail                 | Detail Content for right                                                    |
+
 ### TimePannel Prop
 
 | Attribute                   | Description                                                             | Type    | Default |

src/packages/__VUE/timeselect/doc.md

@@ -196,6 +196,123 @@ app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);
 
 :::
 
+### 更改标题
+
+:::demo
+
+``` html
+<template>
+  <nut-cell @click="handleClick2">
+    <span><label>请选择配送时间</label></span>
+  </nut-cell>
+  <nut-timeselect 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-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+      <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+    </template>
+    <template #detail>
+      <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+    </template>
+  </nut-timeselect>
+</template>
+<script lang="ts">
+  import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue';
+  export default {
+    props: {},
+    setup() {
+      const { proxy } = getCurrentInstance() as any;
+      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(`您选择了：${JSON.stringify(obj)}`);
+      };
+
+      onMounted(() => {
+        state.currentTime2.push({
+          key: state.currentKey2,
+          list: []
+        });
+      });
+
+      return { 
+        ...toRefs(state), 
+        handleChange2,
+        handleSelected2,
+        selectTime2,
+        handleClick2, 
+      };
+    }
+  };
+</script>
+<style lang="scss" scoped>
+.demo {
+  .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 Prop
@@ -209,6 +326,14 @@ app.use(TimeSelect).use(TimePannel).use(TimeDetail).use(Popup);
 | current-time                 | 当前选择的时间，数组元素包含:key: string; list: string[]      | Array  | `[]`
 | lock-scroll            | 背景是否锁定                                                | Boolean        | `false`       |
 
+### Slot
+
+| 字段                   | 说明                                                             |
+|------------------------|----------------------------------------------------------------|
+| title                 | 更改标题                                                    |
+| pannel                 | 左侧列表                                                    |
+| detail                 | 右侧详细内容                                                    |
+
 ### TimePannel Prop
 
 | 字段                   | 说明                                                             | 类型    | 默认值 |

src/packages/__VUE/timeselect/index.taro.vue

@@ -12,7 +12,8 @@
     <view :class="classes">
       <view class="nut-timeselect__title">
         <view class="nut-timeselect__title__fixed">
-          {{ title || translate('pickupTime') }}
+          <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
+          <slot name="title" v-else></slot>
         </view>
       </view>
       <view class="nut-timeselect__content">

src/packages/__VUE/timeselect/index.vue

@@ -13,7 +13,8 @@
     <view :class="classes">
       <view class="nut-timeselect__title">
         <view class="nut-timeselect__title__fixed">
-          {{ title || translate('pickupTime') }}
+          <span v-if="!$slots.title">{{ title || translate('pickupTime') }}</span>
+          <slot name="title" v-else></slot>
         </view>
       </view>
       <view class="nut-timeselect__content">
@@ -95,6 +96,7 @@ export default create({
     return {
       classes,
       popStyle,
+      props,
       close,
       translate
     };

src/sites/mobile-taro/vue/src/business/pages/timeselect/index.vue

@@ -38,6 +38,31 @@
         <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
       </template>
     </nut-timeselect>
+    <h2>更改标题</h2>
+    <nut-cell @click="handleClick3">
+      <span><label>请选择配送时间</label></span>
+    </nut-cell>
+    <nut-timeselect
+      v-model:visible="visible3"
+      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-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange2"></nut-timepannel>
+        <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange2"></nut-timepannel>
+      </template>
+      <template #detail>
+        <nut-timedetail :times="times2" @select="selectTime2"></nut-timedetail>
+      </template>
+    </nut-timeselect>
     <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
   </div>
 </template>
@@ -72,7 +97,8 @@ export default defineComponent({
           key: 1,
           list: ['9:00-10:00', '10:00-11:00']
         }
-      ]
+      ],
+      visible3: false
     });
 
     const toastState = reactive({
@@ -143,6 +169,10 @@ export default defineComponent({
       toastState.cover = false;
     };
 
+    const handleClick3 = () => {
+      state.visible3 = true;
+    };
+
     onMounted(() => {
       state.currentTime1.push({
         key: state.currentKey1,
@@ -164,10 +194,28 @@ export default defineComponent({
       handleChange2,
       handleSelected2,
       selectTime2,
-      handleClick2
+      handleClick2,
+      handleClick3
     };
   }
 });
 </script>
 
-<style lang="scss"></style>
+<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>