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