微信小程序自定义组件之可清除的input组件

<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" src='clear.png' bindtap='clearTap' mode='widthFix'></image>
</view>

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" />

 /**
   * 组件的方法列表
   */
   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: ''
        });
     }
   }

   "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' />