vue的elementUi，阻止日期时间组件el-date-picker，在手机端弹出输入法

三种方式：

1. 设置el-date-picker的属性 editable="false"

（1）有时可以有时不行。

（2）组件内部还有两个input，没有被设置到。

2.设置el-date-picker的属性 @focus="elDatePickerOnFocus"

//去掉input框获得的焦点
elDatePickerOnFocus:function(){document.activeElement.blur();
},

（1）可以。

（2）组件内部还有两个input，没有被设置到。

3.沿用第二种的方法，通过js手动设置组件内部两个input的onfocus方法

// 延时1秒，等待日期组件被渲染
setTimeout(() => {console.log("dom:")// 获取日期组件let inputs = document.querySelectorAll(".elDatePicker > input");// 设置每个日期组件的onfocus方法，直接blurinputs.forEach((input)=>{// 加点颜色，判断选取的组件对不对input.setAttribute("style","background-color:bisque");input.onfocus =function(){input.blur();// 设置日期组件内部的两个inputsetTimeout(() => {let elDatePickers = document.querySelectorAll("body > div.el-picker-panel.el-date-picker.el-popper.has-time > div.el-picker-panel__body-wrapper > div > div.el-date-picker__time-header > span > div.el-input.el-input--small > input");elDatePickers.forEach((elDatePicker)=>{elDatePicker.setAttribute("style","background-color:bisque");elDatePicker.onfocus =function(){elDatePicker.blur();}})}, 300);}})
}, 1000);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！