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>
相关推荐
吃杠碰小鸡几秒前
前端Mac快速搭建开发环境
前端·macos
前端大波5 分钟前
使用webpack-bundle-analyzer 对 react 老项目进行打包优化
前端·react.js·webpack·性能优化
前端 贾公子12 分钟前
(catalog协议) == pnpm (5)
前端·javascript·react.js
JarvanMo16 分钟前
深度解析:如何彻底终结 Flutter 异步操作中的 BuildContext 崩溃?
前端
wxr061621 分钟前
部署Spring Boot项目+mysql并允许前端本地访问
前端·spring boot·mysql·持续部署
假装我不帅27 分钟前
jquery-validation使用
前端·javascript·jquery
怕浪猫32 分钟前
React从入门到出门第六章 事件代理机制与原生事件协同
前端·javascript·react.js
天府之绝36 分钟前
uniapp 中使用uview表单验证时,自定义扩展的表单,在改变时无法触发表单验证处理;
开发语言·前端·javascript·vue.js·uni-app
be or not to be37 分钟前
Html-CSS动画
前端·css·html
初恋叫萱萱42 分钟前
技术基石与职场进阶:构建从Web后端到高性能架构的完整知识图谱
前端·架构·知识图谱