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