mpvue + Vant Weapp 開發小程式之 van-search

提示：不知道怎麼配置環境的請先看第一篇的介紹：點選這裡

1. 引入

"usingComponents": {
    "van-search": "/path/vant-weapp/search/index"
  }
           

2. 使用

<div>
 <van-search
      :value="val"
      placeholder="please input search words"
      show-action
      @cancel="onCancel"
      @search="onSearch"
      label="關鍵字"
      shape="round"
    >
    </van-search>
</div>
           

export default {
    data () {
      return {
        val: ''
      }
    },
    methods: {
      onCancel (e) {
        //這個參數 e 好像沒啥用
      },
      onSearch (e) {
        this.val = e.mp.detail
      }
    }
  }
           

效果圖：

解釋一下，

• :value="val"

  ：輸入綁定的值

• shape="round"

  ：搜尋框兩端橢圓形，不寫這句預設是圓角方形

• label="關鍵字"

  ：搜尋框左邊的字

• show-action

  ：展示“取消”按鈕

• @cancel="onCancel"

  ：點選“取消”事件

• @search="onSearch"

  ：點選 Enter 鍵事件

輸完要搜尋的内容後，點選 Enter 鍵會執行 onSearch 方法，點選“取消”鍵，執行 onCancel 方法。

說實話，這樣設計有點不合理，通常我們更希望搜尋框的右側放個“搜尋”，點選“搜尋”執行 onSearch，“取消”按鈕有點雞肋，是以下面改進一下。

3. 優化

<template>
    <div>
        <van-search
            :value="val"
            placeholder="please input search words"
            use-action-slot
            @cancel="onCancel"
            @change="onChangeVal"
            @search="onSearch"
            label="關鍵字"
            shape="round"
        >
        <view
            slot="action"
            @tap="onSearch2"
        >search</view>
    </van-search>
  </div>
</template>
           

效果圖：

解釋一下，

• use-action-slot

  ：使用插槽

• @change="onChangeVal"

  ：輸入内容變化時執行 onChangeVal 方法

• <view slot="action" @tap="onSearch2">search</view>

  ：通過插槽添加右側“search”按鈕，點選事件為

  @tap="onSearch2"

  ，插槽名稱為 action

多說幾句，執行 onSearch2 時無法擷取輸入的值，是以要借助 onChangeVal：

export default {
    data () {
      return {
        val: ''
      }
    },
    methods: {
      onSearch (e) {
      //這個方法此時還有效，點選 Enter 仍會執行
        this.val = e.mp.detail
      },
      onChangeVal (e) {
        this.val = e.mp.detail
      },
      onSearch2 () {
        wx.showToast({
          title: this.val, // 提示的内容,
          icon: 'success', // 圖示,
          duration: 2000, // 延遲時間,
          mask: true, // 顯示透明蒙層，防止觸摸穿透,
        })
      }
    }
  }
           

最後，源碼位址