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

分两种情况：属性/插槽slot

    属性：<el-input v-model="s_domain" placeholder="请输入域名" style=" 25%" size="small" @keyup.enter.native="doSearch" clearable suffix-icon="el-icon-search"></el-input>

    目前好像没有办法绑定点击事件

 

    插槽slot: 优点：可以绑定击事件

    <el-input v-model="s_domain" placeholder="请输入域名" style=" 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=" 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>