vue element plus TimeSelect 时间选择

简介: vue element plus TimeSelect 时间选择

用于选择或输入日期

可用时间范围是 00:00-23:59

TIP

在 SSR 场景下,您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (例如: VitePress).

固定时间点#

提供几个固定的时间点供用户选择

使用 el-time-select 标签,然后通过startendstep指定起始时间,结束时间和步长。

Select time

时间格式#

使用 format 属性来控制时间格式 (小时以及分钟)。

这里 查看 Day.js 支持的 format 参数。

WARNING

请一定要注意传入参数的大小写是否正确

Select time

固定时间范围#

如果先选中了开始(或结束)时间,则结束(或开始)时间的状态也将会随之改变。

Start time

End time

API#

Attributes#

属性名 说明 类型 默认值
model-value / v-model 选中项绑定值 string
disabled 禁用状态 boolean false
editable 文本框可输入 boolean true
clearable 是否显示清除按钮 boolean true
size 输入框尺寸 enum default
placeholder 非范围选择时的占位内容 string
name 原生属性 string
effect Tooltip 主题,内置了 dark / light 两种主题 string / enum light
prefix-icon 自定义前缀图标 string / Component Clock
clear-icon 自定义清除图标 string / Component CircleClose
start 开始时间 string 09:00
end 结束时间 string 18:00
step 间隔时间 string 00:30
min-time 最早时间点,早于该时间的时间段将被禁用 string
max-time 最晚时间点,晚于该时间的时间段将被禁用 string
format 设置时间格式 string see formats HH:mm

Events#

事件名 说明 类型
change 用户确认选定的值时触发 Function
blur 在组件 Input 失去焦点时触发 Function
focus 在组件 Input 获得焦点时触发 Function

Exposes#

方法名 说明 类型
focus 使 input 获取焦点 Function
blur 使 input 失去焦点 Function

源代码#

组件文档

相关文章
|
5天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
5天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
5天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
10天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
10天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1053 0
|
11天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
11天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
11天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
11天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。