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

时间:2024-03-07 14:55:04
分两种情况:属性/插槽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>