一、利用官方给定的事件来触发

二、实现基本代码

<!--  -->
<template><div><el-date-picker ref="time" v-model="value" type="datetime" placeholder="Select date and time" /><el-button type="primary" @click="handleClickShow">点我显示</el-button><el-button type="primary" @click="handleClickClose">点我隐藏</el-button></div>
</template><script>
export default {data() {return {value:""};},methods: {handleClickShow(){console.log(123)this.$refs.time.focus()},handleClickClose(){this.$refs.time.blur()}}
}</script>

三、扩展

之所以会用到这个方法来实现需求并不是根据按钮来控制控件的显示和隐藏，而是在项目中，将el-date-picker写成了一个组件，放到另一个组件的插槽中，父级组件有@mousedown事件，造成在点击框内input部分的时候，并不能正常展示出时间选择控件，后来发现这个组件input焦点相关事件完美解决了这个问题，官网并没有发现有控制时间选择器的属性和方法，这里做记录。

el-date-picker手动控制时间选择器的显示和隐藏相关推荐

VantUI时间选择器
前言: 由于页面所需的时间选择器较多,所以我只写了一个弹出层,选择器全部放弹出层里,通过 v-if 控制显示与隐藏. 主要代码: 1.需求主要是实现年月日的选择,type="date&quo ...
ios 时间选择器月份设置中文_iOS 自定义日期选择器 PickerView优化版
// rgb颜色转换(16进制->10进制) #define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue ...
Flutter 日期选择器与时间选择器
更多文章请查看 lutter从入门到精通 1 日期选择器 //设置默认显示的日期为当前DateTime initialDate = DateTime.now();void showDefaultYe ...
ElementUI手动控制popover弹层的显示与隐藏
是时候表演真正的技术了网上找了一堆都是没用的....搜的第一个是啥也没说手动控制el-popover弹窗的显示与隐藏其实很简单,el-popover层绑定一个v-model的值为true或者fal ...
Android软键盘的显示与隐藏
本文仅是对原创文章重新进行或多或少的代码测试,权当记录并加深印象再次感谢开发者社区的分享一:简述点击文本框EditText,系统会自动弹出软键盘(其本质是一个Dialog),这必然会引起当前Ac ...
uni-app使用picker的多种选择器（多列，时间，地区）
picker底部滚动选择器 <template><view><view><picker :range="years" @change=&q ...
强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示本地下载今天分享一个独立的日期选择插件Kalendae,Kalendae是一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
bootstrap，datetimepicker日期时间选择器-限制时间段，以及中文显示问题
基于bootstrap的css,js bootstrap-datetimepicker的css,js <script src="jquery-1.11.1.min.js"&g ...
使用Layui的时间选择器组件不显示问题
初次使用Layui 最近在做一个springboot项目,前端的知识我不太会,为了页面美观就使用了layui的时间选择组件,但是怎么都显示不出来时间组件. 以下就是记录我的使用历程. 我先去layui ...

el-date-picker手动控制时间选择器的显示和隐藏

一、利用官方给定的事件来触发

二、实现基本代码

三、扩展

el-date-picker手动控制时间选择器的显示和隐藏相关推荐

最新文章

热门文章