Vue2 cube-ui时间选择器详解
更新时间:2021年12月21日 08:21 点击:680 作者:贝塔-突突
前言
vue2 整合 cube-ui 时间选择器(供有点点基础的看)
一、需求及效果
需求
我们要在原搜索的情况下,加搜索时间
效果
二、代码实现
index.vue(html)
<div class="header"> <cube-input v-on:focus="showMinPicker('startTime')" v-model="startTime" placeholder="开始时间" :maxlength=30 style="width: 50%;"></cube-input> <span>到</span> <cube-input v-on:focus="showMinPicker('endTime')" v-model="endTime" placeholder="结束时间" :maxlength=30 style="width: 50%;"></cube-input> </div>
解析:
- cube-input cube自带的输入框。
- v-on:focus=“showMinPicker(‘startTime')” v-on监听事件,focus指的是输入框聚焦后触发此事件,如果禁用状态,则不触发。
- v-model 双向绑定(用于时间显示)
- maxlength 最大长度
date
data () { return { // 开始时间 startTime: '', // 结束时间 endTime: '', // 时间标识 timeIdentifying: '' } }
methods
methods: { // 监听出发选择时间 showMinPicker (time) { if (!this.minPicker) { this.minPicker = this.$createDatePicker({ title: '选择时间', visible: true, // 最小时间 min: new Date(2000, 0, 1), // 最大时间 max: new Date(2099, 12, 1), // 当前时间 value: new Date(), // 显示的格式 format: { year: 'YYYY', month: 'MM', date: 'DD' }, // 显示多少列 columnCount: 3, // 选择时间确定后 onSelect: this.selectHandler, // 选择时间取消后 onCancel: this.cancelHandler }) } // 选择时间标识 this.timeIdentifying = time // 显示 this.minPicker.show() }, // 选择时间确定后 三个参数是不同的时间格式,可能根据自己需求定 selectHandler (selectedTime, selectedText, formatedTime) { let time = '' for (let index = 0; index < selectedText.length; index++) { if (index === (selectedText.length - 1)) { time += selectedText[index] } else { time += selectedText[index] + '-' } } console.log('开始修改') if (this.timeIdentifying === 'startTime') { console.log('修改startTime') this.startTime = time } else if (this.timeIdentifying === 'endTime') { console.log('修改endTime') this.endTime = time } console.log('结束修改') }, // 取消事件 cancelHandler () { // 清空选择好的时间 this.startTime = '' this.endTime = '' } }
测试效果
三、资料参考
input
TimePicker(时间选择器)
详细在官网地址:
官网地址:https://didi.github.io/cube-ui/#/zh-CN
Cube-ui中文文档地址:https://www.bookstack.cn/read/Cube-UI-zh/30.md
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/qq_44697754/article/details/121972862
下一篇: Vue开发常用方法详解
相关文章
- 这篇文章主要介绍了在java中获取List集合中最大的日期时间操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-15
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了教你怎么用Java获取国家法定节假日,文中有非常详细的代码示例,对正在学习java的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-23
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
mysql中获取一天、一周、一月时间数据的各种sql语句写法
创建表:复制代码 代码如下:create table if not exists t( id int, addTime datetime default '0000-00-00 00:00:00′)添加两条初始数据:insert t values(1, '2012-07-12 21:00:00′);insert t values(2, '2012-07...2014-05-31- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01