快捷導(dǎo)航

微信小程序自定義組件之可清除的input組件

更新時(shí)間：2018年07月17日 09:50:29 作者：RaoMeng1995

最近正在做的一個(gè)小程序項(xiàng)目中需要用到一個(gè)可清除的輸入框控件，為了方便小編直接使用了可清除的input自定義組件，下面腳本之家小編給大家?guī)?lái)了微信小程序自定義組件之可清除的input組件，感興趣的朋友一起看看吧

最近正在做的一個(gè)小程序項(xiàng)目中需要用到一個(gè)可清除的輸入框控件，為了在項(xiàng)目中使用方便以及方便其他項(xiàng)目直接使用，便封裝了一個(gè)可清除的input自定義組件。

組件需要達(dá)到的需求是：輸入框內(nèi)沒有內(nèi)容時(shí)，刪除按鈕隱藏；當(dāng)輸入框內(nèi)有內(nèi)容時(shí)，刪除按鈕顯示，點(diǎn)擊刪除按鈕則清空輸入框內(nèi)所有內(nèi)容。并且還可以設(shè)置輸入框整體樣式以及輸入框左側(cè)圖標(biāo)。

明確了需求之后，就可以開始著手實(shí)現(xiàn)了。

首先，在目標(biāo)目錄下新建一個(gè)自定義組件

建好之后，我們需要來(lái)設(shè)計(jì)布局。根據(jù)需求來(lái)看，我們只需要三個(gè)組件：兩個(gè)image和一個(gè)input。左邊一個(gè)image提示圖標(biāo)，然后一個(gè)input輸入框，最后一個(gè)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>

然后，我們就要來(lái)設(shè)置組件的一些屬性和監(jiān)聽方法了。小程序的組件屬性列表是定義在.js文件的properties里的。把需要暴露出去并可以修改的屬性都寫在這里面。其語(yǔ)法示例如下：

properties: {
  myProperty: { // 屬性名
   type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
   value: '', // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
   observer: function(newVal, oldVal, changedPath) {
     // 屬性被改變時(shí)執(zhí)行的函數(shù)（可選），也可以寫成在methods段中定義的方法名字符串, 如：'_propertyChange'
     // 通常 newVal 就是新設(shè)置的數(shù)據(jù)， oldVal 是舊數(shù)據(jù)
   }
  },
  myProperty2: String // 簡(jiǎn)化的定義方式
 }

我的屬性列表如下：

 /**
   * 組件的屬性列表
   */
   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"
     }
   }

完成了屬性列表的編寫之后，接下來(lái)我們需要為自定義組件添加監(jiān)聽事件。

事件系統(tǒng)是組件間通信的主要方式之一。自定義組件可以觸發(fā)任意的事件，引用組件的頁(yè)面可以監(jiān)聽這些事件。

監(jiān)聽以及觸發(fā)事件的語(yǔ)法是這樣的：

//觸發(fā)事件
//自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法，指定事件名、detail對(duì)象和事件選項(xiàng)
methods: {
  onTap: function(){
   var myEventDetail = {} // detail對(duì)象，提供給事件監(jiān)聽函數(shù)
   var myEventOption = {} // 觸發(fā)事件的選項(xiàng)
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
//監(jiān)聽事件
<!-- 當(dāng)自定義組件觸發(fā)“myevent”事件時(shí)，調(diào)用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以寫成 -->
<component-tag-name bind:myevent="onMyEvent" />

這里我們需要設(shè)置的觸發(fā)事件有，輸入框的輸入事件以及輸入框的確認(rèn)事件。通過(guò) 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)完成了這個(gè)可清除input組件的自定義開發(fā)了?，F(xiàn)在來(lái)看怎么使用這個(gè)組件。

首先在需要使用此組件的頁(yè)面.json文件中設(shè)置usingComponents屬性來(lái)引入這個(gè)自定義組件

   "usingComponents": {
     //這里是設(shè)置的組價(jià)標(biāo)簽名稱以及組件地址
     "clearInput": "../../components/clearInput/clearInput"
   }

然后，我們就可以在頁(yè)面中引用這個(gè)自定義組件了，引用的方式非常簡(jiǎn)單，通過(guò)我們?cè)谏弦徊皆O(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)的效果圖如下：