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

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

二、实现基本代码

<!--  -->
<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焦点相关事件完美解决了这个问题，官网并没有发现有控制时间选择器的属性和方法，这里做记录。