LewisRoc
2021-06-18 11:26
采纳率: 57.1%
浏览 202

如何在el-input输入框右上角添加图标,右上角!

如何在el-input输入框右上角添加图标如下图:

像这种叉号图标 点击能删除输入框,

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • LewisRoc 2021-06-18 15:32
    已采纳

    点赞 打赏 评论
  • li.siyuan 2021-06-18 11:30

    使用css定位

    .drawing-item {
      position: relative;
    
      .drawing-item-toolbar {
        display: none;
        position: absolute;
        top: 0;
        right: 5px;
        z-index: 1;
      }
    }
    点赞 打赏 评论
  • 风雪一更 2021-06-18 11:34

    初始化时候,给每个input添加一个状态值 show:true

    写一个图片定位到右上角,添加点击事件,点击改变show的值为false。

    代码供参考:

    //html
    <div v-for="item in list">
        <el-input v-model="input" v-if="item.show"></el-input>
        <img src="close.png" @click="hideThis(index)" />
    </div>
    
    //css
    div{
        position:relative;
    }
    img{
        width:20px;
        height:20px;
        position:absolute;
        top:-10px;
        right:-10px;
    }
    
    //js
    
    hideThis(index){
        this.list[index].show=false
    }
    点赞 打赏 评论

相关推荐 更多相似问题