Vue 实战-2 输入框加搜索图标


分两种情况:属性/插槽slot
    属性:<el-input v-model="s_domain" placeholder="请输入域名" style="width: 25%" size="small" @keyup.enter.native="doSearch" clearable suffix-icon="el-icon-search"></el-input>
    目前好像没有办法绑定点击事件
 
    插槽slot: 优点:可以绑定击事件
    <el-input v-model="s_domain" placeholder="请输入域名" style="width: 25%" size="small" @keyup.enter.native="doSearch" clearable>  <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch"></i> </el-input>
    
 
如果遇到输入内容过长,导致把搜索图标给遮盖,如何做?
    即在上面的源码里给 input框加一个padding-right值,且让图标定位即代码如下
    <el-input v-model="s_cert_scope" placeholder="请输入证书" style="width: 25%; position: relative; padding-right: 15px" size="small" @keyup.enter.native="doSearch">  
        <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch" style=" position: absolute; right: 15px;"></i>  
 </el-input>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM