目錄
1. 標簽
1.1 插槽
2. vue配置項
2.1 data
2.2?props
2.3?watch
2.4?methods
3.完整代碼
1. 標簽
1.1 插槽
????????在父組件中用如下模板替代對應的(<slot>標簽里的內(nèi)容)插槽內(nèi)容(通過v-slot與name屬性匹配)，如果父組件不提供slot內(nèi)容，則會使用子組件的默認內(nèi)容：
<template v-slot:子組件插槽name屬性值>
? ? ? ? <!--替代內(nèi)容-->
<template>
uni-search-bar中有兩個插槽用來替換搜索圖標和清除圖標
①父組件沒有slot內(nèi)容時，使用子組件默認內(nèi)容
默認圖標如下：
左邊為搜索圖標，右邊為清除圖標
<!--子組件-->
<!--搜索圖標-->
<slot name="searchIcon">
? ? <!--uni-icons為uniapp圖標庫標簽（需下載），更改type換圖標-->
? ? <uni-icons color="#c0c4cc" size="18" type="search" />
</slot>?
<!--清除圖標-->
<slot name="clearIcon">
?? ???<uni-icons color="#c0c4cc" size="20" type="clear" />
</slot>
②父組件有slot內(nèi)容后，template標簽內(nèi)的內(nèi)容替換子組件slot標簽內(nèi)內(nèi)容
替換圖標如下（搜索圖標替換成眼睛圖標，清除圖標替換成房子圖標）：
<!--父組件-->
<uni-search-bar @confirm="" @input="" bgColor="#fff" radius="17" placeholder="低熱量">
????????<template v-slot:searchIcon>
????????????????<uni-icons color="#c0c4cc"?size="18" type="eye" />
?? ??? ?</template>
????????<template v-slot:clearIcon>
????????????????<uni-icons color="#c0c4cc"?size="18" type="home" />
?? ??? ?</template>
</uni-search-bar>
2. vue配置項
2.1 data
data() {
????????return {
? ? ? ? ????????show: false, // input是否顯示
?? ??? ??? ??? ?showSync: false, // input是否獲得焦點
?? ??? ??? ??? ?searchVal: ''? // input輸入值
????????}
},
2.2?props
????????從父組件收到的數(shù)據(jù)放入props配置項中，即該組件可自定義的屬性，如下：
placeholder ???—— 輸入框未輸入時的占位字符，默認為"請輸入內(nèi)容"
radius? ? ? ? ? ???—— 搜索框圓角半徑，默認值為5(px)
clearButton? ? ?—— 清除按鈕是否存在，默認值為"auto"，輸入框為空時不顯示，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 還有"always"，"none"可選
cancelButton? ?—— 取消按鈕是否存在，默認值為"auto"，輸入框為空時不顯示，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 還有"always"，"none"可選
cancelText? ? ? ?—— 取消按鈕文本，默認值為"取消"
bgColor? ? ? ? ? ?—— 搜索框背景顏色，默認為"#F8F8F8"
maxlength? ? ? ?—— 可輸入最大長度，默認值為100(px)
value? ? ? ? ? ? ? ?—— 從父組件v-model收到的值，默認為""(vue3改為modelValue)
focus? ? ? ? ? ? ? ?—— input是否自動聚焦，默認值為false
①當父組件不定義屬性時，默認如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-474108.html
props: {
? ? ? ? placeholder: {
?? ??? ??? ??? ?type: String,
?? ??? ??? ??? ?default: "請輸入內(nèi)容"
? ? ? ? },文章來源地址http://www.zghlxwxcb.cn/news/detail-474108.html
到了這里，關于uni-ui的uni-search-bar 搜索欄代碼解析(vue2)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
