element-ui組件輸入框之放大鏡搜索圖標(biāo)問題
前言
在使用element-ui組件時(shí)想給輸入框組件中的放大鏡圖標(biāo)也就是搜索圖標(biāo)綁定事件，可以進(jìn)行如下操作：
一、解決suffix-icon="el-icon-search"綁定事件問題
suffix-icon=“el-icon-search” 是一個(gè) HTML 屬性，用于在 element-ui 中的 el-input 輸入框添加后綴圖標(biāo)。其中 el-icon-search 是一個(gè)內(nèi)置的圖標(biāo)類名，表示搜索圖標(biāo)。
具體而言，它會(huì)將在輸入框的右側(cè)顯示一個(gè)小的搜索圖標(biāo)。例如
如何給這個(gè)圖標(biāo)綁定搜索功能，搜索框輸入內(nèi)容后，點(diǎn)擊圖標(biāo)或者搜索完回車，根據(jù)輸入內(nèi)容進(jìn)行文件檢索：
<template>
<div>
<el-input v-model="searchText" placeholder="請輸入內(nèi)容" @keyup.native.enter="handleSearch">
<i slot="suffix" class="el-input__icon el-icon-search" @click="handleSearch"></i>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
searchText: '',
};
},
methods: {
handleSearch() {
console.log('已發(fā)送搜索請求');
// 在這里實(shí)現(xiàn)您的搜索邏輯
},
},
};
</script>注意：
以上代碼中：
①@keyup.native.enter="handleSearch"保證輸入框回車后可進(jìn)行搜索。
②<i slot=“suffix” class=“el-input__icon el-icon-search” @click=“handleSearch”> 保證點(diǎn)擊搜索圖標(biāo)后可進(jìn)行搜索。
到此這篇關(guān)于element-ui組件輸入框之放大鏡(搜索圖標(biāo))的文章就介紹到這了,更多相關(guān)element-ui組件輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS中圖片緩沖loading技術(shù)的實(shí)例代碼
這篇文章介紹了JS中圖片緩沖loading技術(shù)的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個(gè)閉包
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》 在'執(zhí)行模型詳解'中講到了關(guān)于作用域分配的問題，這一篇博文將詳細(xì)的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關(guān)系。2010-10-10
這篇文章主要為大家詳細(xì)介紹了原生js滑動(dòng)輪播封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName，需要的朋友可以參考一下2013-03-03
如何用js實(shí)現(xiàn)鼠標(biāo)向上滾動(dòng)時(shí)浮動(dòng)導(dǎo)航
今天給大家介紹一下使用JavaScript判斷鼠標(biāo)滑輪是不是向上滾動(dòng)，當(dāng)向上滾動(dòng)的時(shí)候，導(dǎo)航條浮動(dòng)在頂部位置。示例代碼如下。2016-07-07
這篇文章主要介紹了對TypeScript庫進(jìn)行單元測試的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
基于JavaScript編寫一個(gè)簡易的數(shù)字轉(zhuǎn)中文功能
這篇文章主要為大家詳細(xì)介紹了如何基于JavaScript編寫一個(gè)簡易的數(shù)字轉(zhuǎn)中文功能,雖然是功能看起來很簡單,但是要是沒有寫過這類功能的話,那么可能會(huì)無從下手,下面小編就和大家詳細(xì)介紹一下吧2026-01-01
JS實(shí)現(xiàn)運(yùn)動(dòng)緩沖效果的封裝函數(shù)示例
這篇文章主要介紹了JS實(shí)現(xiàn)運(yùn)動(dòng)緩沖效果的封裝函數(shù),涉及JavaScript時(shí)間函數(shù)與數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
canvas有一個(gè)神奇的方法getImageData，它可以獲取canvas內(nèi)圖像的每一個(gè)像素點(diǎn)的顏色值獲取，而且可以改變。本文將對canvas實(shí)現(xiàn)圖片的濾鏡轉(zhuǎn)化的方法進(jìn)行介紹，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01