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方法，直接blur
  inputs.forEach((input)=>{
    // 加点颜色，判断选取的组件对不对
    input.setAttribute("style","background-color:bisque");
    input.onfocus =function(){
      input.blur();
      // 设置日期组件内部的两个input
      setTimeout(() => {
        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);