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, // 显示透明蒙层，防止触摸穿透,
        })
      }
    }
  }

---

最后，源码地址