el-input 不可编辑,但是点击的时候出现弹窗/或其他操作面板,并且带可清除按钮

1.@focus="getFocus"鼠标聚焦的时候写个方法,弹窗起来

javascript 复制代码
getFocus(){ 

      this.定义的弹窗状态字段 = true;

}

2.点击确定的时候,数值赋值到el-input的输入框,弹窗取消(this.定义的弹段字端 = false)

3.但是会有个问题就是el-input 不可点击加了:readonly="true"这个属性,此时清除效果就会失效

javascript 复制代码
<el-input

v-model="value"

placeholder="请选择"

:readonly="true"

@focus="getFocus($index)"

>

<!-- slot="suffix"重点 btnClearable事件,v-show=value有值就显示没有值就隐藏 -->

<span slot="suffix" v-show="value" @click="getClearable(row,$index)">

<i class="el-icon-close" style="margin-left: 5px;margin-top:13px;cursor: pointer;"></i>

</span>

</el-input>
javascript 复制代码
getClearable(row,index){

   this.value = ''

},
css 复制代码
<style>

/deep/.el-icon-close:before {

content: "\E78D";

}

</style>
相关推荐
子兮曰3 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭3 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路6 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒7 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
lemon_yyds8 小时前
《vue 2 升级vue3 父组件 子组件 传值: value 和 v-model
vue.js
Kagol8 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉8 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau8 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生8 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼8 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范