element-plus删除默认样式el-input el-input--suffix is-focus

您好，如果您需要修改 `el-input` 后缀样式以及聚焦时的样式，可以使用以下样式进行修改： ```css .el-input--suffix { color: red; /* 修改后缀文本颜色为红色 */ font-size: 16px; /* 修改后缀文本字号为16px */ } .el-input.is-focus .el-input--suffix { color: blue; /* 修改聚焦时后缀文本颜色为蓝色 */ font-size: 18px; /* 修改聚焦时后缀文本字号为18px */ /* 其他聚焦时的样式修改 */ } ``` 这样就可以修改 `el-input` 的后缀样式以及聚焦时的样式了。需要注意的是，这里使用了 `.el-input.is-focus` 选择器来表示聚焦时的样式，其中 `.is-focus` 是 `el-input` 组件内置的类名。 希望这个回答能够帮到您，如果您有任何其他的问题，可以随时提出。

### Vue3 中使用 Element Plus 的 `el-input` 组件 #### 安装和引入 Element Plus 为了在项目中使用 Element Plus，首先需要安装该库： ```bash npm install element-plus ``` 接着，在项目的入口文件（通常是 main.ts 或者 main.js）中全局注册 Element Plus 和样式文件。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` #### 基本用法 下面是一个简单的例子展示如何在一个页面上使用 `el-input` 输入框组件。此示例展示了基本输入框以及带图标按钮的组合形式[^2]。 ```html <template> <div class="example"> <!-- 单行文本 --> <el-input v-model="text" placeholder="请输入内容"></el-input> <!-- 多行文本域 --> <el-input type="textarea" :rows="4" v-model="textarea" placeholder="请输入内容"></el-input> <!-- 带前置/后置标签 --> <el-input placeholder="请选择日期" suffix-icon="el-icon-date"></el-input> <!-- 自定义前缀或后缀图标的插槽 --> <el-input placeholder="请输入内容"> <template #prefix><i class="el-icon-search"></i></template> </el-input> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; let text = ref(''); let textarea = ref(''); </script> ``` 对于更复杂的场景，比如当遇到像对话框内的 input 获取不到焦点的问题时，可以尝试通过 `$nextTick()` 方法来延迟执行获取焦点的操作，确保 DOM 已经更新完毕后再操作DOM元素[^1]。 #### 解决弹窗内 Input 不聚焦问题的方法 如果发现 `el-dialog` 打开后里面的 `el-input` 没有自动获得焦点，则可以在打开对话框之后立即调用一次 `$nextTick()` 来等待视图渲染完成；然后再嵌套一层 `$nextTick()` 调用来真正设置焦点给目标 input 元素。 ```typescript this.dialogVisible = true; this.$nextTick(() => { this.$nextTick(() => { (this.$refs.input as HTMLInputElement).focus(); }); }); ``` 需要注意的是这里的 `ref="input"` 是指定了要访问的具体 input 控件的名字属性值。