修改el-input内的input

### 修改 Element UI 中 `el-input` 组件内 `input` 样式的两种方法

#### 方法一：使用 `/deep/` 或者 `>>>`

为了覆盖默认样式并应用新的 CSS 属性到 `.el-input__inner` 类上，可以利用 Vue 的深度作用选择器来实现这一点。需要注意的是，在不同版本的预处理器配置下，可能需要采用不同的写法。

对于大多数情况而言：

/deep/ .el-input__inner {
    background-color: transparent;
}

如果项目中启用了 scoped 样式，则上述语法适用；如果不带 scope 则不需要加 `/deep/` 关键字[^1]。

#### 方法二：全局引入或局部不带 Scope 的样式文件

另一种方式是在页面级别定义公共样式表而不将其限定于特定组件范围内。这可以通过直接编辑 HTML 文件中的 `<style>` 标签完成，或者创建一个新的外部 CSS 文件并将链接添加至入口HTML文档里。

当不想让更改影响整个应用程序时，也可以在同一Vue单文件组件(SFC)内部编写未被scoped修饰符约束的选择器:

<style>
.el-input__inner {
    /* 定义所需的CSS规则 */
    border-radius: 0px !important;
    color: red;
}
</style>

这种方法简单直接，但可能会带来一些副作用，比如意外地改变了其他地方相同类名元素的表现形式。

#### JavaScript 控制 Input 行为

除了外观上的定制外，有时也需要调整控件的行为逻辑。通过监听事件和操作数据模型的方式能够轻松达成目标。下面的例子展示了如何绑定 change 和 input 事件处理函数以及设置初始焦点。

<template>
  <div class="example">
    <!-- 使用v-on指令指定事件名称 -->
    <el-input v-model="value" @change="handleChange"></el-input>

    <!-- 简化版语法糖 -->
    <el-input v-model.trim="value" @input="handleChange" v-focus></el-input>
  </div>
</template>

<script>
export default{
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChange(newValue) {
      console.log('Value changed:', newValue);
      
      // 对输入值做进一步处理...
      if (typeof this.value === 'string') {
        this.value = parseInt(this.value, 10);
      }
    }
  }
};
</script>

此代码片段说明了怎样捕获用户的交互动作，并据此执行相应的业务流程[^2]。