vue3中修改el-input输入框背景

在 Vue3 中，如果你想要修改 `el-input` 输入框的背景颜色，你可以通过自定义组件样式或者直接操作 DOM 来实现。这里推荐使用 Vue 的 `style` 特性来添加样式，因为它能够更好地支持组件的生命周期和动态更新。

**1. 使用 scoped 样式（推荐）：**
在`.vue` 文件的 `<template>` 或者 `<style lang="scss/vue">` 标签内，创建一个 scoped 类名来覆盖默认样式：

<template>
  <el-input v-bind:class="{ customInput: isCustomBackground }" />
</template>

<style scoped>
.customInput {
  background-color: your-desired-color; /* 替换为你想要的颜色 */
}
</style>

然后在组件内部控制 `isCustomBackground` 的值：

<script>
export default {
  data() {
    return {
      isCustomBackground: false,
    };
  },
  methods: {
    // 添加方法来改变背景色
    toggleBackgroundColor() {
      this.isCustomBackground = !this.isCustomBackground;
    },
  },
};
</script>

**2. 直接操作DOM（非推荐，仅适用于简单场景）：**
在 `mounted()` 生命周期钩子中，可以获取到元素并更改其背景：

mounted() {
  const inputElement = document.querySelector('.el-input');
  if (inputElement) {
    inputElement.style.backgroundColor = 'your-desired-color';
  }
}

记得在适当的时候清理已设置的样式，避免内存泄漏。