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
      }
    }
  }

效果图:
van-search
解释一下,

  • :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>

效果图:
van-search

解释一下,

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

最后,源码地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值