小程序 封裝可清除input

注： 該組件的定位可以自己寫，我這裏的直接

position: fixed;
left:0;
top:0;
right:0;
z-index: 10;
background:#fff;

一、頁面

<view class="customer-search">
  <view class="search-entry">
    <image class="search-icon" src="/images/[email protected]"></image>
    <input class="search-input" value="{{keyword}}" confirm-type="{{confirmType}}" placeholder="{{placeholder}}" bindinput="handleInput"></input>
    <view class="icon-wrapper" wx:if="{{clearable}}">
      <icon class="search-clear" class="icon-small" color="#999" type="cancel" size="23" wx:if="{{keyword}}" bindtap="handleClearTap"></icon>
    </view>
  </view>
  <text class="cancel">取消</text>
</view>

二、WXSS

.customer-search{
  display: flex;
  align-items: center;
  padding: 25rpx;
}
.search-entry{
  display: flex;
  flex: auto;
  margin-right: 26rpx;
}
.search-entry .search-icon{
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.search-entry{
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  border: 1px solid #007AFF;
  border-radius: 48rpx;
}
.search-entry .search-input{
  width: 85%;
  margin-right: 15rpx;
}
.icon-wrapper{
  width: 23px;
  height: 23px;
}

三、JS

// components/searchInput/searchInput.js
Component({
  behaviors: ['wx://form-field'],
  /**
   * 組件的屬性列表
   */
  properties: {
    placeholder: {
      type: String,
      value: '請輸入'
    },
    confirmType: {
      type: String,
      value: 'search'
    },
    disabled: {
      type: Boolean,
      value: false
    },
    keyword: {
      type: String,
      value: ''
    },
    clearable: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleInput(e){
      // console.log(e)
      let detail = {
        keyword: e.detail.value
      }
      this.setData({
        keyword: detail.keyword
      })
      this.triggerEvent('input', detail)
    },
    handleClearTap(){
      let detail = {
        keyword: ''
    }
    this.setData({
      keyword: ''
    })
    this.triggerEvent('clear', detail);
    }
  }
})

tips: 這裏說一下triggerEvent的用法

triggerEvent觸發事件，自定義組件觸發事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項

 參考：組件間通信與事件

引用：

json文件中

"usingComponents": {
    "search-input": "/components/searchinput/searchinput"
 }

wxml中

<search-input class="search" value="{{keyword}}" clearable="{{true}}" bindinput="handleinput"></search-input>