微信小程序自定義組件-可清除的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' />
複製代碼

最終實現的效果圖以下：

項目GitHub地址：github.com/RaoMeng/Tem…