Y Blog

Appearance

el-input 自动获取焦点不灵

🕒 Published at:

el-input 自动获取焦点不灵 ​

解决办法 ​

自定义指令：在全局定义一个自动获取焦点的自定义指令，在所有组件中都可以使用v-focus来自动获取焦点。

在main.js中定义全局指令 ​

js
Vue.directive('focus', {
  inserted: function(el) {
    el.querySelector('input').focus();
  }
});

在单组件中使用 ​

html
<el-input
  v-focus  // 自定义指令
  v-if="item.isInput"
  v-model="item.lineName"
  placeholder="请输入标题"
  @blur="saveTitle(item)" />

参考 ​

v-for循环中的el-date-picker隐藏输入框 ​

实现方法 ​

代码示例 ​

html
<i class="el-icon-time hide_input" @click="openPicker(index)" >
  <el-date-picker v-model="todoItem.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
  :ref="`tiemPick${index}`" @change="setToDo" >
  </el-date-picker>
</i>

方法定义 ​

js
openPicker(index) {
  this.$refs[`tiemPick${index}`][0].focus(); //唤醒日期选择器
}

样式定义 ​

css
.hide_input {
  position: relative !important;
}

/* 修改控件自带的css */
.hide_input .el-date-editor {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.hide_input /deep/ .el-input__inner {
  /* 取消鼠标样式 */
  cursor: default !important; 
}

参考 ​