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);

猜你喜欢

转载自blog.csdn.net/u013595395/article/details/107611972
今日推荐