微信小程式自定義元件-可清除的input元件
最近正在做的一個小程式專案中需要用到一個可清除的輸入框控制元件，為了在專案中使用方便以及方便其他專案直接使用，便封裝了一個可清除的input自定義元件。
元件需要達到的需求是：輸入框內沒有內容時，刪除按鈕隱藏；當輸入框內有內容時，刪除按鈕顯示，點選刪除按鈕則清空輸入框內所有內容。並且還可以設定輸入框整體樣式以及輸入框左側圖示。
明確了需求之後，就可以開始著手實現了。
首先，在目標目錄下新建一個自定義元件
建好之後，我們需要來設計佈局。根據需求來看，我們只需要三個元件：兩個image和一個input。左邊一個image提示圖示，然後一個input輸入框，最後一個image刪除按鈕。我們要把儘可能多的資料設定成可以修改的繫結資料，提高自定義元件的可擴充套件性。
最終確定的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>
複製程式碼
然後，我們就要來設定元件的一些屬性和監聽方法了。小程式的元件屬性列表是定義在.js檔案的properties裡的。把需要暴露出去並可以修改的屬性都寫在這裡面。其語法示例如下：
properties: {
myProperty: { // 屬性名
type: String, // 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
value: '', // 屬性初始值（可選），如果未指定則會根據型別選擇一個
observer: function(newVal, oldVal, changedPath) {
// 屬性被改變時執行的函式（可選），也可以寫成在methods段中定義的方法名字串, 如：'_propertyChange'
// 通常 newVal 就是新設定的資料， oldVal 是舊資料
}
},
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"
}
}
複製程式碼
完成了屬性列表的編寫之後，接下來我們需要為自定義元件新增監聽事件。 事件系統是元件間通訊的主要方式之一。自定義元件可以觸發任意的事件，引用元件的頁面可以監聽這些事件。
監聽以及觸發事件的語法是這樣的：
//觸發事件
//自定義元件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail物件和事件選項
methods: {
onTap: function(){
var myEventDetail = {} // detail物件，提供給事件監聽函式
var myEventOption = {} // 觸發事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
}
}
//監聽事件
<!-- 當自定義元件觸發“myevent”事件時，呼叫“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />
複製程式碼
這裡我們需要設定的觸發事件有，輸入框的輸入事件以及輸入框的確認事件。通過 triggerEvent 方法指定事件名以及事件觸發事件引數
/**
* 元件的方法列表
*/
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: ''
});
}
}
複製程式碼
以上就已經完成了這個可清除input元件的自定義開發了。現在來看怎麼使用這個元件。
首先在需要使用此元件的頁面.json檔案中設定usingComponents屬性來引入這個自定義元件
"usingComponents": {
//這裡是設定的組價標籤名稱以及元件地址
"clearInput": "../../components/clearInput/clearInput"
}
複製程式碼
然後，我們就可以在頁面中引用這個自定義元件了，引用的方式非常簡單，通過我們在上一步設定的標籤名稱就可以引用了。
<clearInput inputHint='搜尋訂單' icon-class='common_search_img' input-class='common_search_input' confirmType='search' bind:inputListener='inputListener' bind:inputConfirm='searchEvent' /> 複製程式碼
最終實現的效果圖如下：
