组件需要抵达的需求是：输入框内没有内容时，，，，，，删除按钮隐藏；；；当输入框内有内容时，，，，，，删除按钮显示，，，，，，点击删除按钮则清空输入框内所有内容。。。。并且还可以设置输入框整体样式以及输入框左侧图标。。。。

明确了需求之后，，，，，，就可以最先着手实现了。。。。

首先，，，，，，在目的目录下新建一个自界说组件

建好之后，，，，，，我们需要来设计结构。。。。凭证需求来看，，，，，，我们只需要三个组件：两个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' />

小程序工具提供多类型商城/门店小程序制作，，，，，，可视化编辑 1秒天生5步上线。。。。通过拖拽、拼接模？？？？榻峁剐〕绦蛏坛且趁，，，，，，所看即所得，，，，，，只需要美工就能做出细腻商城。。。。更多小程序市肆请审查：小程序市肆