パッケージ化されたアプレットの検索ボックス コンポーネント (検索) をカスタマイズし、ボタンのクリック検索と検索入力をサポートします。

レンダリング

コードは以下のように表示されます

1. サブコンポーネント内

• wxml部分

<view class="search-box-component">
    <view class="search-content">
        <view class="search-left">
             <view class="search-icon" style="width:30rpx;height:30.3rpx;margin: 0 20rpx 0 28rpx;"></view>
             <input class="input" placeholder="请输入关键词" bindinput="handleInputTxt" bindconfirm="search" value="{
    
    {inputValue}}"></input>
        </view>
        <view class="search-right" bindtap="handleClickSearch" >
            搜索
        </view>
    </view>
    <view wx:if="{
    
    {isShowShare}}" class="share-btn share-icon" bindtap="handleShare"></view>
</view>

• wxss部分

    .search-box-component {
    
    
        display: flex;
        align-items: center;
        padding: 28rpx 52rpx 26rpx 46rpx;
        background-color: var(--themeColor);
    }
    .search-content {
    
    
        flex: 1;
        display: flex;
        border-radius: 44rpx;
        padding: 6rpx 6rpx 4rpx 0;
        background-color: #fff;
        align-items: center;
    }
    .search-content .search-left {
    
    
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .search-content .search-right {
    
    
        font-size: 24rpx;
        color: #fff;
        width: 116rpx;
        border-radius: 34rpx;
        padding: 16rpx 32rpx 14rpx 34rpx;
        background-color: var(--themeColor);
    }
    input {
    
      /* 光标颜色 */
        caret-color: var(--themeColor);
    }
    .share-btn {
    
    
        width: 44rpx;
        height:44rpx;
        margin-left: 44rpx;
    }
    .search-icon {
    
     /* 搜索 icon 图标 */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABN1JREFUWEfNl2uIVVUUx3/rzOOcO9pzwkjLpD5IKRSWpQVClmZJThraBymDxHykkb0sdc4+vkqKpiRTyMBKQuhhWagpVjRQWpJGlll9SCnJUEZJvefMOGfFOfdo87j3nntHYdwfz1577d/5r7XXXls4x4acYzyUDaRTqKKPPQq1RiE6GLgKOJ+Qk1j8g7IHpZFK/UDmB3vL/eGSgdRQiWVPRqUe5bLUjQQlZDPSOkdMy65U+8SgJCA1NYMgfBfoH69TWrH4mpBNWOEe1GpCtAqkNyo3gY4BLk/2CIFVXOzPklkEaWCpQOplxqPhapAaiBzKCqqsF2Tu8YPFnKtxhiMsQbk5sdsGFWPFHP+72LqiQGoyE0DXAoLojyjjxAS/p/1l23l17amIvApUA3vBHyKGI4V8FATKham1MVFmE/jjxXCsHJhTtmqcYah+ish5CJ+x2x8t79Gaz1deoDiBcXbHORMrE9zSVZjTUJ59DyofARais8UNGkoHWmBPJZQVuZzRgeWGqZCKauylIE8Dh3H8q2UORzvadlIoV2ecfbmjLa+IyT7elTDlW6PPcAEZJ8rBSwBPjG/SgXLSro+PdnVFn7TTVC6sGieCcFH2ief3SwcymeWg0xEaxfWHlbthmr0uqLqOsCIplOEAMc0/t13TOWSe8y3KYJS54vlL0jboyrwa5y+gNzBJjP92GtAhlFokHCdu8zo1WOAMp4f/jTzF8a4AdFyjxtkKRIXTE7d9HnVWyDgtEB17bhPjf6mePROVZcCbYvzJZwfIfh/kPlQbxAtmF1fIdU4gZBAdKW6wRY39JMiLwDYx/tCzBPQxyBiEheL69Wkh+wPlSoSHxPXfUi9zP6prUZoQv5cYTp4plBrnO+BG0JligteKAxlnIzAK5HUx2RlqevZCTh5AqQC9S0yw6UyA1FCD2ocQyaA6WrxgQ1rInkNYDPwpxr8iMlbjbAZGADv4yR9S6B4qBVRN9b1grQOawa/teCV1TuqFdn9Cibq+aO52Mf7nuqBmMGG4Pb71kWViso+Vsnneam3sD0HGAlvF+HekFsZYEdfZhHAnwnZx/SHxN89ZFNWmxME74M8q1kbkh8lEzdu23I9pnZhgfWlAuWr6fXwzq04TL1ipkWKe8wbwcOLkMCqrIdyM6H6ubf5NJuRvKXJhxwGnMUnmXZhgUERVElCiyEqUR3KxZoQY/6vcd3sGyiKQCzs42yDGH10olOo6axAmxv4qrVtl3okd+WwLN2gzsal1vgCGovovFhPFDT6JoZ6lFseZAtShXA/YIOvFZOs6V2Uc1FmVwETRekJM9uVC4MVb2MVcSksMdQ0Qgr5ENlgiS9v3Mfo8FxFwVExk8/9QE+fM8lyYkiFs4YhfJw1ky1LolHHSw0QvjruTb4eA5Vit66S+5Yc8itRA9UiQB5LTFPXjR8FaAzo1rmdFoFJfHUlCWmBPB5kP9GoDcQD4BbQJoRKVPqgOiIteNKK3mbIRZZp4/n71nEnRnVgMqiSg02oZeqLOo1g8iMZhLDQiFTditTZIfcvOdmFMgSoLqJ1j1+mLFd5Aq/TDkh6oHsOyDiLyK+GJnR3zqVSoLgMVUaekqXbha3NCuw0oqXW5nAo5IJ7fN5d23TzUVA+ksqJJ5mWjtrb7gTrq0e0KnfNA/wGmFP80PnQWigAAAABJRU5ErkJggg==');
        background-size: cover;
    }
    .share-icon {
    
     /* 分享 icon 图标 */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAA89JREFUWEfVmW/onmMUxz9fYs0mik2xQjOWRCgzCiPLvyy0Vytrq8UL4Q3N5I20qZE/8WKUKLU3yL9ITf7EhFKmpfmbGC2zIbMp9tXRuef+bc9z/+7n/t3P/fx23jxPXde5zuc+97nOua5zi4NMdJDxMjJg20cBG4BjgOWS3q7jvJ7Ats8GLsrFmj7Ur8CTkn7vBWL7OuCFHPsTuEbSW+NBj4GxfSzwDHDVeIo1x9dJurkP8JHAJ8Apg0DvA7Z9BLAROKsmTJ1pj0q6rd9E27OA8Gpt6DLwXcDqXPxv4FlgM7C3DlmPOTuB9ZL2VOkPCl0G/gw4IxdfJunphqADqw0CXQYOT0wBwrvTJf01sOUJKNSFLgM77e2WFPHcudSBHjmw7UOBk4DZwHHAuUB5o0bKu7rI050DZ8G4IvP8fOD0DMWqN7pVUmSU/yud7aGFhO1DwkvATcDlwOEDxtvHks7rBDgr2hrgtD6Qscm/Bb4EfgTmABeX5n4NLJD0/VCBbc8EnkrPlln/Ad4DXgXej2pXZCTbC4BXgGmpMAZ2aMC2zwReB44vkW4HHgeiXP+0v7frwA4F2PY5wJvA0QkVlfJh4F5Jv/UKi7qwrQPbPgH4EIjfkCjPiyXFA/QU25dkePQNg7Jiq2nN9hvAwjTwC3CppE1twbbqYdtL8sAU68bOX1h1vrUdheLTqg3W60Fb8XBWq88zJYWdtZLurMq1tiMvR6YIOSAb9NNtC/gG4Lk08jNwsqRd4wCH7cjPEe8rJW2tml+MtQX8EnBtLnqPpPvqGG8yZ8LAtqcDscGi3EYKO1HSD01gQsf2VOAhIE6Mt0va0WqWsH0l8Fou+oGkC5rCJvBSoLg8rJIUYbNP2vBwvP67c8XVkor/jbht3wo8ksr3S4qrW6vALwKLcsVFkl5uRJpKXQBvAU5Ne3MkfTXZgf/I5B8bboqkKBqNZageth3NkKKzs13SjMakXYREXhr/O1gDWyTNnezAcR4oYnaTpAl3jYYdEnGd+SK9ulHShZPdw3G5fAc4H7hF0rpJDVzARTmVtHuisKE/SEhEWorKt0dS1PORiO1oosSVKmSNpFVlkHJpjmNh9IdDZkv6ZhTEtp8AVqTtOyQ90A/4eeD6HHwXuFHSd11B2z4s7n958In/IfMkfdQPeF72CaLXVUhUsaIjNGz26JyWO0IbJEWXaIzs/8kg2vuPAWXoYYP2Wj8a6ZdJ2lYJHIO2I0WtzHZR0VvoAjrOIHG3Ww88KCne7gFS+YUoL5ddwIaNvZLGDb+mn7S6eojBPDwyqgrD/wKXbApLTtTD8QAAAABJRU5ErkJggg==');
        background-size: cover;
    }

• js部分

Component({
    
    
  /**
   * 组件的属性列表
   */
  properties: {
    
    
    // 是否显示分享 按钮
    isShowShare: {
    
    
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    
    
    inputValue: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
    
    search(e) {
    
    
      this.triggerEvent('handleSearch',e.detail.value)
    },
    handleClickSearch() {
    
    
      this.triggerEvent('handleSearch',this.data.inputValue)
    },
    handleInputTxt(e) {
    
    
      this.setData({
    
     inputValue: e.detail.value })
    },
    handleShare() {
    
    
      this.triggerEvent('handleShare','')
    }
  }
})

• json部分

{
    
    
  "component": true,
  "usingComponents": {
    
    }
}

2. 親コンポーネント内

• wxml部分

<!-- 没有分享按钮 -->
<search bind:handleSearch="handleSearch"></search>

<!-- 有分享按钮 -->
<search bind:handleSearch="handleSearch" bind:handleShare="handleShare" isShowShare="{
    
    {true}}"></search>

• js部分

Page({
    
    
  /**
   * 页面的初始数据
   */
  data: {
    
    
    showPopup: false
  }, 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    }
  handleSearch(e) {
    
    
    console.log('点击了搜索',e.detail)
  },
  handleShare() {
    
    
    console.log('点击了分享')
  }
})

• json部分

{
    
    
  "usingComponents": {
    
     
    "search": "/component/search/index"
  },
  "navigationBarTitleText": "search"
}