小程序自定义组件-可清除的input组件

最近正在作的一个小程序项目中须要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其余项目直接使用,便封装了一个可清除的input自定义组件。git

组件须要达到的需求是:输入框内没有内容时,删除按钮隐藏;当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内全部内容。而且还能够设置输入框总体样式以及输入框左侧图标。github

明确了需求以后,就能够开始着手实现了。json

首先,在目标目录下新建一个自定义组件
新建自定义组件.png小程序

建好以后,咱们须要来设计布局。根据需求来看,咱们只须要三个组件:两个image和一个input。左边一个image提示图标,而后一个input输入框,最后一个image删除按钮。咱们要把尽量多的数据设置成能够修改的绑定数据,提升自定义组件的可扩展性。ide

最终肯定的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 // 简化的定义方式
  }

个人属性列表以下:flex

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

完成了属性列表的编写以后,接下来咱们须要为自定义组件添加监听事件。
事件系统是组件间通讯的主要方式之一。自定义组件能够触发任意的事件,引用组件的页面能够监听这些事件。this

监听以及触发事件的语法是这样的:spa

//触发事件
//自定义组件触发事件时,须要使用 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' />

最终实现的效果图以下:
实现效果图.gif

项目GitHub地址:https://github.com/RaoMeng/TemplateOfHotel

相关文章
相关标签/搜索