el-input的焦点

el-input是Element UI中的一个输入框组件，可以通过自定义指令来实现el-input的焦点。以下是两种实现方式：

1. 使用v-focus指令

<el-input v-focus></el-input>

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

2. 使用v-el-focus指令

<el-input v-el-focus></el-input>

Vue.directive('el-focus', {
  inserted: function (el) {
    el.focus()
  }
})

相关问题

el-input获取焦点 input输入框为空时高亮 el-input值非法时

要实现你所说的功能，可以使用以下步骤：

1. 给 el-input 组件添加 ref 属性，这样可以在代码中通过 this.$refs.input 获取到 el-input 组件实例。

<el-input ref="input"></el-input>

2. 监听 el-input 组件的 focus 事件，在 focus 事件处理函数中判断 el-input 是否为空，如果为空，则添加一个高亮样式。

this.$refs.input.$on('focus', () => {
  if (!this.$refs.input.value) {
    this.$refs.input.$el.classList.add('highlight')
  }
})

3. 监听 el-input 组件的 blur 事件，在 blur 事件处理函数中移除高亮样式。

this.$refs.input.$on('blur', () => {
  this.$refs.input.$el.classList.remove('highlight')
})

4. 监听 el-input 组件的 input 事件，在 input 事件处理函数中判断 el-input 的值是否合法，如果不合法，则添加一个错误样式。

this.$refs.input.$on('input', () => {
  if (this.$refs.input.value && !isValid(this.$refs.input.value)) {
    this.$refs.input.$el.classList.add('error')
  } else {
    this.$refs.input.$el.classList.remove('error')
  }
})

5. 根据需要，定义高亮和错误样式的 CSS 样式。

.highlight {
  border-color: #409eff;
}

.error {
  border-color: #f56c6c;
}

希望在.el-input__inner获得焦点时 改变同级元素el-input-group__append元素的样式

要在`.el-input__inner`获取焦点时改变其同级元素`.el-input-group__append`的样式，你可以通过监听`.el-input__inner`的`focus`事件，并在该事件处理函数中操作CSS或者JavaScript来动态更新`.el-input-group__append`的样式。这里是一个简单的例子，假设你想改变`.el-input-group__append`的背景颜色：

import { ElInput } from 'element-plus';

new ElInput({
  // 其他配置...
}).$on('input focus', function (event) {
  if (event.type === 'focus') { // 确保是获取焦点的事件
    this.$refs.appendEl.style.backgroundColor = 'your-desired-color'; // 设置新样式
  }
});

在这个例子中，`this.$refs.appendEl`是对`.el-input-group__append`的一个引用，你需要确保它已经被正确的绑定到DOM上。替换`'your-desired-color'`为你想要的效果。