最近正在做的一個小程序項目中需要用到一個可清除的輸入框控件，為了在項目中使用方便以及方便其他項目直接使用罗捎，便封裝了一個可清除的input自定義組件宛逗。
組件需要達(dá)到的需求是：輸入框內(nèi)沒有內(nèi)容時盾剩，刪除按鈕隱藏；當(dāng)輸入框內(nèi)有內(nèi)容時屎暇，刪除按鈕顯示驻粟，點(diǎn)擊刪除按鈕則清空輸入框內(nèi)所有內(nèi)容。并且還可以設(shè)置輸入框整體樣式以及輸入框左側(cè)圖標(biāo)挤巡。
明確了需求之后酷麦，就可以開始著手實(shí)現(xiàn)了。
首先母廷，在目標(biāo)目錄下新建一個自定義組件
建好之后琴昆，我們需要來設(shè)計布局馆揉。根據(jù)需求來看，我們只需要三個組件：兩個image和一個input勤讽。左邊一個image提示圖標(biāo)拗踢，然后一個input輸入框，最后一個image刪除按鈕诸狭。我們要把盡可能多的數(shù)據(jù)設(shè)置成可以修改的綁定數(shù)據(jù)，提高自定義組件的可擴(kuò)展性驯遇。
最終確定的wxml布局文件如下：
<view class='input-class'>
<image src='{{inputIcon}}' mode="scaleToFill" class='icon-class'></image>
<input placeholder='{{inputHint}}' bindconfirm='{{confirmTap}}' style='flex:1;width:100%;padding-left:12rpx;' bindinput='inputListener' bindconfirm='inputConfirm' value='{{inputValue}}' type='{{inputType}}' password='{{isPassword}}' confirm-type='{{confirmType}}'></input>
<image class="{{isClearShow?'clearImgShow':'clearImgHide'}}" src='clear.png' bindtap='clearTap' mode='widthFix'></image>
</view>
然后叉庐，我們就要來設(shè)置組件的一些屬性和監(jiān)聽方法了。小程序的組件屬性列表是定義在.js文件的properties里的玩郊。把需要暴露出去并可以修改的屬性都寫在這里面枉阵。其語法示例如下：
properties: {
myProperty: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '', // 屬性初始值（可選）侦厚，如果未指定則會根據(jù)類型選擇一個
observer: function(newVal, oldVal, changedPath) {
// 屬性被改變時執(zhí)行的函數(shù)（可選）拙徽，也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'
// 通常 newVal 就是新設(shè)置的數(shù)據(jù)， oldVal 是舊數(shù)據(jù)
}
},
myProperty2: String // 簡化的定義方式
}
我的屬性列表如下：
/**
* 組件的屬性列表
*/
properties: {
inputHint: {
type: String,
value: '搜索'
},
inputIcon: {
type: String,
value: 'search.png'
},
inputType: {
type: String,
value: 'text'
},
isPassword: {
type: Boolean,
value: false
},
confirmType: {
type: String,
value: "done"
}
}
完成了屬性列表的編寫之后想诅，接下來我們需要為自定義組件添加監(jiān)聽事件淳蔼。
事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件讳癌，引用組件的頁面可以監(jiān)聽這些事件存皂。
監(jiān)聽以及觸發(fā)事件的語法是這樣的：
//觸發(fā)事件
//自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法骤菠，指定事件名疤孕、detail對象和事件選項
methods: {
onTap: function(){
var myEventDetail = {} // detail對象，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
//監(jiān)聽事件
<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時鹉戚，調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
這里我們需要設(shè)置的觸發(fā)事件有，輸入框的輸入事件以及輸入框的確認(rèn)事件遏餐。通過 triggerEvent 方法指定事件名以及事件觸發(fā)事件參數(shù)
/**
* 組件的方法列表
*/
methods: {
inputListener: function (e) {
var value = e.detail.value;
var cursor = e.detail.cursor;
if (value === null || value === undefined || value.length === 0) {
this.setData({
isClearShow: false
});
} else {
this.setData({
isClearShow: true
});
}
var detail = {
value: value,
cursor: cursor
};
this.triggerEvent('inputListener', detail);
},
inputConfirm: function (e) {
var value = e.detail.value;
var detail = {
value: value
}
this.triggerEvent('inputConfirm', detail);
},
clearTap: function () {
this.setData({
isClearShow: false,
inputValue: ''
});
}
}
以上就已經(jīng)完成了這個可清除input組件的自定義開發(fā)了∈Ф迹現(xiàn)在來看怎么使用這個組件幸冻。
首先在需要使用此組件的頁面.json文件中設(shè)置usingComponents屬性來引入這個自定義組件
"usingComponents": {
//這里是設(shè)置的組價標(biāo)簽名稱以及組件地址
"clearInput": "../../components/clearInput/clearInput"
}
然后，我們就可以在頁面中引用這個自定義組件了信粮，引用的方式非常簡單趁啸，通過我們在上一步設(shè)置的標(biāo)簽名稱就可以引用了督惰。
<clearInput inputHint='搜索訂單' icon-class='common_search_img' input-class='common_search_input' confirmType='search' bind:inputListener='inputListener' bind:inputConfirm='searchEvent' />
最終實(shí)現(xiàn)的效果圖如下：
項目GitHub地址：
微信小程序酒店類模板
微信小程序捐款類模板
