更新记录

1.0.1（2023-09-15） 下载此版本

v1.0.1 leke-datetime-styler 修复mode属性值为['year', 'month'] 年、月, 在IOS端不能正常显示。

1.0.0（2023-09-01） 下载此版本

v1.0.0 leke-datetime-styler 初始化版本

平台兼容性

uni-app

其他

leke-datetime-styler

基于picker-view内置组件的vue3+ts版本时间选择器组件，支持按年、月、日、时、分、秒选择时间日期，兼容H5、小程序。支持自由切换暗黑主题。

特点和功能：

• 可定制外观： 提供主题颜色和样式选项，让你的时间选择器与应用外观一致。
• 平滑动画效果： 通过动画和过渡效果，提供出色的用户体验，使时间选择变得更加流畅。
• 简单集成： 详细的文档和示例代码，让你在应用中轻松地集成和使用时间精选器。

安装使用

• 可在右侧的使用 HBuilderX 导入插件或下载示例项目ZIP，方便快速上手。
• 提示：使用该插件确保你安装了sass编译插件

基本用法

在 template 中使用组件

<template>
  <view class="mainstay">
    <button class="mainstay-btn" @click="showDateStyler = true">
      选择时间
    </button>
    <view class="mainstay-text">已选时间：{{ dateInitValue || '--' }}</view>
  </view>
  <lekeDatetimeStyler
    :value="dateInitValue"
    :visible="showDateStyler"
    :model="model"
    @cancel="handCancel"
    @confirm="handConfirm"
  ></lekeDatetimeStyler>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import lekeDatetimeStyler from '@/components/leke-datetime-styler/leke-datetime-styler.vue'

const showDateStyler = ref(false)
const dateInitValue = ref<string | number | Date>('')
const model = ['year', 'month', 'day']

// 确认选择回调
const handConfirm = (e: string | number | Date): void => {
  showDateStyler.value = false
  dateInitValue.value = e
  console.log('回调时间===>', e)
}

// 取消选择回调
const handCancel = (): void => {
  showDateStyler.value = false
  console.log('取消===>')
}
</script>

组件属性

组件事件

model属性说明

在线预览演示（H5）

组件版本

v1.0.1

有问题可以联系作者（qq：1923487191），在使用过程遇到问题可以提出来讨论，也可以在评论区发布留言交流心得。🎈🎈🎈