vue+element el-input使用clearable后出现两个关闭图标

最新推荐文章于 2024-08-22 13:57:45 发布

原创最新推荐文章于 2024-08-22 13:57:45 发布 · 586 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

博客围绕前端页面问题展开，给出期待效果及解决办法，即在本页面css文件添加代码，使用sass，若用less需将::v-deep换成less写法，最后提醒检查同页面其他input框是否受影响。

问题: 期待效果:

解决办法:

在本页面 css文件中添加下面代码:(注意我用的是sass,如果用less可能就是把::v-deep换成less写法就行)

  ::v-deep .el-input__validateIcon {
    display: none;
}

没啦,复制粘贴去试试吧.(别忘了检查一下,同页面别的input框受没受影响)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xu_duo_i

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决element-plus加了clearable导致input宽度一直变化的问题

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

04-26

657

遇到 Element Plus 的<el-input>加了clearable宽度抖动问题，本质原因是它内部结构变化导致宽度跟着变了。给 el-input 固定宽度，保证它不管里面有什么都一动不动，稳得一批。顺带说一下，这个坑在表单、搜索栏、弹窗输入框这些场景特别容易踩，尤其是inline布局的时候。想要完整体验这个小坑，我还打包了一个GitHub示例和Vue3 Playground预览链接，有需要的可以自取～

VUE3+Element-Plus+TS el-input固定显示几行，内容超长失去焦点显示省略号，获取到焦点显示完整内容

m0_48083875的博客

08-13

536

需求是实现el-input固定:rows=5,在正常内容超长的情况下显示省略号，并且鼠标放在上面是显示tooltip，点击获取到焦点时显示完整内容。（2）内容通过css控制超长显示省略号，失去焦点时使css生效，获取到焦点时使css失效显示完整内容。(3) 并且失去焦点的时候记录下输入框内滚动的距离，在失去焦点时才能回到顶端，并且使css生效.（1）el-input外边套一个el-tooltip。（4）记得css代码需要使用穿透。以上是相关代码，没写详细请随便问！

参与评论您还未登录，请先登录后发表或查看评论

【Vue+Element-UI】el-input使用clearable后出现两个关闭图标

╭じò ぴé╮。Qi

08-13

1616

处理element-ui使用过程中出现的问题，根据业务需要封装了带搜索条件的组件，在el-input组件上使用clearable后，出现了两个关闭图标的现象。

Vue文本域属性＜el-input组件仿clearable，重写清空按钮

Aotman_的博客

08-22

1660

Vue文本域属性

解决：el-input添加clearable属性后出现2个×清除图标

qq_38969618的博客

06-06

4256

设置.el-input__validateIcon类样式为display: none

[element-ui] nput框使用clearable后出现两个XX的问题

qq_14993591的博客

03-08

1364

element-ui的input框添加clearable后出现两个XX（关闭icon图标）项目场景：element-ui开发的项目在页面的dialog中嵌套了一个popover（manual触发），popover的内部嵌套的input，input中添加了个clearable属性，结果在这个input中输入内容后，出来两个关闭按钮（图标），前一个能点击，后一个不能点击。源码: 在element-ui的input中存在当前代码直接设置当前class display: none 参考：关于ele

element的el-dialog弹窗写了输入框el-input,使用clearable后出现两个icon叉

kekexiaomayi的博客

10-28

1489

element的

Vue+element el-table中显示隐藏and重置密码功能

学习记录

01-20

5711

前言：这是一个可以在 el-table 中显示、隐藏密码，并且具有重置密码的功能。虽然办法有点笨，但是确实是能实现功能的！本大二学生还需努力！ 1. 功能起源 element el-input 组件中有一个 show-password 属性，此属性可得到一个可切换显示隐藏的密码框，但是此属性只能使用在 el-input 组件中。但是我在写项目中，有一个功能是在表格中可以显示隐藏密码，于是 show-password 属性在表格中就不能使用了于是自己冥思苦想想到了一个方法，可以在表格中显示、隐藏

vue+element-ui实现表格编辑的三种实现方式

10-17

在使用Vue.js框架结合Element UI组件库开发Web应用时，表格编辑功能的实现是经常遇到的需求之一。本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格...

el-cascader 加上filterable 和clearable 后出现2个清除icon解决方案

Sindy的博客

07-21

957

el-cascader v-model="citys" @change="handleChange" :options="cityList" collapse-tags clearable filterable placeholder="登录城市" class="login-city" ></el-cascader>

el-input添加属性clearable后样式（宽）发生变化

weixin_49516521的博客

03-15

3998

检查发现，element 中clearable图标是用span包裹起来的，我的代码结构中标题也是用span包裹起来的，并且统一设置了li下面的span的样式。而clearable也刚好在li下面，所以也被更改了。el-input添加属性clearable之前，宽都是一样的，在项目中并没有设置过input相关的样式，在添加完属性，输入内容后宽发生了变化，并且清除的图标位置也往前偏。解决：选择li下面的子元素span，并把input的宽度设置成加上clearable之后的宽。今天就来简单记录个小问题吧，

element input组件常用属性用法

yangfeixiang001的博客

10-09

1万+

在vue项目中肯定会用到element组件库，里面的input组件的用法和常用属性如下： ** 1，type属性：用法跟原生输入框一样，例：type=“text”，type=“password”,进行输入框的类型设置 2，value 或 v-model：用于输入框内的数据进行双向数据绑定，例：value=“name”,或v-model=“name” 3，maxlength属性和minlength属性："maxlength"用于现在输入框最多输入的字符，同理 “minlength” 用于输入框最少输入的字符

vue--自定义带clearable属性的文本域input组件

热门推荐

flyingfish

01-27

2万+

今天写页面时遇到一个需求：input框类型是textarea，且支持清除。兴冲冲的直接用以下方式试了一下： <el-input v-model="val" clearable :rows="5" type="textarea"/> 发现输入框右侧并不会出现清除符号，查了半天发现clearable属性和在type="textarea"时会失效，于是自己封装了一个支持清空的文本域输入框组件，拿来即用！ <template> <div class="textInput

el-input使用clearable，:title,MessageBox弹框外部关闭，el-Dropdown 下拉菜单详细举例，el-table的show-overflow-tooltip是什么？

qq_63322025的博客

06-16

1678

3.像某行文字过长，比如一个系统有少数民族使用的情况，虽然可以做单行文本强制不换行，省略号显示，但是为了交互性，最好我们加一个:title=“ （V-model绑定的内容）”，在鼠标摸上去的时候，会有详情以标签的形式显示出来。设置:show-overflow-tooltip="true"属性可以使单元格超出的内容自动折叠显示为...当鼠标移入时单元格的上方会弹出一个小tips来显示单元格得所有内容。解决方案是给蓝色部分的样式增加一个宽度，做一个限制即可，便可保证清楚标志在input的输入框内。

Vue+element 用户列表业务实现

benlalagang的博客

08-26

1848

用户列表页面组件布局实现以及业务交互的实现、渲染用户列表、用户增删改查

el-input添加clearable属性输入内容时会直接撑开

regretTAT的博客

06-05

787

解决方案添加css...... 即可正常。

Element表单el-input嵌入按钮样式修改

m0_50115641的博客

02-07

6695

Element表单el-input嵌入el-button后修改边框、颜色、图标

element-ui 删除input框尾部默认图标和获取焦点边框高亮问题

weixin_45842954的博客

05-20

3568

我们引用element-ui的input框时，尾部默认会携带图标我们可以把它去除，利用f12审查元素发该图标为一个标签类名为 .el-input__validateIcon，把它设置为display:none 就可以去除了，直接给该标签设置发现不起效果，那么找到它的父级标签，增加权重的，这是设置在公共样式里面 .el-form-item--feedback { .el-input__validateIcon { display: none; } } 获取焦点时边框默认蓝色高亮输入

实现el-input后缀图标和clearable的兼容以及竖线分割

AzeShinja的博客

01-04

4536

经常能遇到一个需求，需要做成如下的样子但是总所周知，element的clearable和后缀图标时位置是冲突的，他会这样: 造成这样的原因是因为：所以我们只要把他们的父级内容改为反序的不就行了，所以 ::v-deep { .el-input__suffix { // 处理前缀图标不垂直居中的问题 height: auto; font-size: 20px; &-inner { flex-direction: row-rev.

Element+vue el-input 内嵌一个按钮

最新发布

05-28

<think>好的，用户现在的问题是关于如何在ElementPlus和Vue中，在el-input组件内嵌一个按钮。之前他们已经问过如何添加点击图标并配置事件，现在需要扩展知识到内嵌按钮的实现。需要结合之前的回答和提供的引用内容，给出解决方案。首先，回顾之前的回答，用户已经知道使用插槽和属性两种方法来添加图标。现在需要将图标替换为按钮，可能涉及到样式调整和事件处理。提供的引用中有涉及表单验证、表格树中的输入框以及控制显隐的内容，但可能需要从中提取相关知识点，比如使用插槽、事件处理等。接下来，考虑如何在el-input中添加按钮。Element Plus的el-input组件支持使用插槽来添加前后缀内容，因此可以使用前置或后置插槽来放置按钮。例如，使用prefix或suffix插槽，或者append和prepend插槽，具体取决于按钮的位置需求。需要确认按钮的样式是否与输入框协调，可能需要自定义样式，比如调整内边距、颜色等。同时，按钮的点击事件需要绑定到Vue的方法上，确保触发正确的逻辑。另外，用户提供的引用中，引用[1]展示了在el-form-item中使用条件渲染的el-input和div，这可能对处理动态内容有帮助，但当前问题更关注静态按钮的添加。引用[3]中的nextTick使用可能在处理异步DOM更新时有参考价值，但此处可能不需要。需要确保回答的结构清晰，分步骤说明，并提供代码示例。同时，注意Vue3的语法，比如使用<scriptsetup>和响应式变量。可能还需要提到如何处理按钮与输入框的交互，比如点击按钮时触发表单提交或数据验证。最后，生成相关问题，帮助用户深入理解，比如样式调整、动态控制按钮显隐、表单验证集成等。</think>### 在Element Plus和Vue中实现el-input内嵌按钮的方法 #### 方法一：使用`prefix`/`suffix`插槽（推荐） ```vue <template> <el-input v-model="inputValue" placeholder="请输入内容">  <template #prefix> <el-button type="primary" :icon="Search" @click="handleSearch" class="input-btn" /> </template>  <template #suffix> <el-button type="danger" @click="clearInput" class="input-btn" > 清空 </el-button> </template> </el-input> </template> <script setup> import { ref } from 'vue'; import { Search } from '@element-plus/icons-vue'; const inputValue = ref(''); const handleSearch = () => { console.log('搜索内容:', inputValue.value); }; const clearInput = () => { inputValue.value = ''; }; </script> <style scoped> /* 调整按钮间距 */ :deep(.el-input-group__prepend) { padding: 0 5px; } /* 按钮样式优化 */ .input-btn { padding: 8px; margin: -2px; /* 消除默认外边距 */ border: none; background: transparent; } </style> ``` #### 方法二：使用`append`/`prepend`插槽（带边框） ```vue <el-input v-model="inputValue"> <template #append> <el-button type="success" @click="submitForm"> 提交 </el-button> </template> </el-input> ``` --- ### 关键配置说明 | 特性 | 插槽方式 | 属性方式 | |----------------|-----------------------------------|-----------------------| | 按钮位置 | 完全自定义位置 | 固定位置 | | 样式控制 | 支持深度样式定制[^3] | 受组件默认样式限制 | | 事件绑定 | 直接@click | 无 | | 交互复杂度 | 支持复杂交互 | 仅简单场景 | --- ### 常见问题解决方案 1. **按钮点击区域过小** - 通过CSS调整按钮内边距： ```css :deep(.el-input-group__append) { padding: 0; } ``` 2. **输入框与按钮对齐问题** - 使用弹性布局修正： ```css :deep(.el-input-group) { display: flex; align-items: center; } ``` 3. **动态控制按钮显隐** ```vue <template #suffix> <el-button v-if="inputValue" @click="clearInput" > <el-icon><Close /></el-icon> </el-button> </template> ``` --- ### 结合表单验证的完整示例 ```vue <template> <el-form :model="form" :rules="rules"> <el-form-item prop="username"> <el-input v-model="form.username"> <template #append> <el-button type="primary" @click="verifyUsername" :loading="verifying" > 验证 </el-button> </template> </el-input> </el-form-item> </el-form> </template> <script setup> import { reactive, ref } from 'vue'; const form = reactive({ username: '' }); const verifying = ref(false); const rules = { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ] }; const verifyUsername = async () => { verifying.value = true; try { // 模拟接口验证 await new Promise(resolve => setTimeout(resolve, 1000)); console.log('验证通过'); } finally { verifying.value = false; } }; </script> ```