uni-app：uni-search-bar组件的@input事件

女爷i 2024-04-23 12:45 13阅读 0赞

如下图所示，在页面search.vue中引用了uni-app的uni-search-bar组件，并且定义了@input事件的方法input，在方法中打印了传入的参数e的值：  
![在这里插入图片描述][d28eb9b10dce48ed8945685fff277f2d.png]

**注意，在@input事件的方法中，输入参数e（而不是e.value）就是输入的值：**

// input 输入事件的处理函数
      input(e) {
        console.log(e)
      }

运行到微信开发者工具，看看结果，确实输出了用户输入的结果：  
![在这里插入图片描述][858c24f0359d4ed98063fab7a03686f0.png]

uni-app官网给出的解释：  
[https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html\#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95][https_uniapp.dcloud.net.cn_component_uniui_uni-search-bar.html_E5_9F_BA_E6_9C_AC_E7_94_A8_E6_B3_95]  
![在这里插入图片描述][36ae9d14af2f4bf5982f818ad1b9adbf.png]

[d28eb9b10dce48ed8945685fff277f2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/64e6a57c35044e00b4a2355453244619.png
[858c24f0359d4ed98063fab7a03686f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/46eeea9718374769a78083fa7a4fc4a0.png
[https_uniapp.dcloud.net.cn_component_uniui_uni-search-bar.html_E5_9F_BA_E6_9C_AC_E7_94_A8_E6_B3_95]: https://uniapp.dcloud.net.cn/component/uniui/uni-search-bar.html#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95
[36ae9d14af2f4bf5982f818ad1b9adbf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a64c4c86fb14448eaea8d3d9fdc85555.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app：uni-search-bar组件的@input事件

uni-app：uni-search-bar组件的@input事件

女爷i/ 2024年04月23日 12:45/ 0 赞/ 14 阅读

相关 element-plus input组件+select组件实现输入加选择

需求用户输入数值，再选择下拉项，进行相应数据的筛选查询 ![在这里插入图片描述][79a73a8631d74fd0abf1dde7699633fc.png] 组

野性酷女/ 2024年04月01日 18:50/ 0 赞/ 109 阅读

相关小程序input组件禁用键盘

今天有个需求，需要用到日期控件选择身份证日期，弄完之后发现点击日期控件的时候键盘也会自动展开，在博客上找到了解决方案，这里做个记录。代码： <picker mod

ゝ一纸荒年。/ 2022年12月27日 02:13/ 0 赞/ 242 阅读

相关 input事件和change事件的区别

input事件：在输入框输入的时候会实时响应并触发； change事件：在输入框失去焦点，并且输入框的值发生变化的时候才会触发，和 blur事件略有不同，blur事件是每次

旧城等待，/ 2022年12月17日 07:21/ 0 赞/ 201 阅读

相关微信小程序的input组件的冒泡事件解决

微信小程序解决冒泡事件是用catch，非冒泡事件是bind 我的需求是在复选框中点击输入框请输入时，不能操作选中事件，选中事件会发生的原因就是冒泡机制 ![在这里插入

冷不防/ 2022年12月16日 09:20/ 0 赞/ 304 阅读

相关 vue组件事件属性穿透

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 组件事件属性穿透属性 `$attrs

叁歲伎倆/ 2022年10月01日 15:52/ 0 赞/ 225 阅读

相关 vue中 input组件封装及调用

封装input vue组件 <template> <div class="inputItem"> <div class="leftText

悠悠/ 2022年03月22日 02:02/ 0 赞/ 708 阅读

相关 html页面去除input组件的空格

html页面去除input组件的空格 $("card").bind("blur",function(){ var result=$(this

缺乏、安全感/ 2022年01月25日 23:47/ 0 赞/ 517 阅读

相关使用antd的Form组件在hubmit事件外的其他事件中获取Form表单中input的值

今天写一个表单组件时遇见一个小问题，以前一般都是在蚂蚁金服的Form组件的提交事件中直接对values进行操作及调用接口，将数据传给后台；而今天是想在Form提交事件中不提交数

朱雀/ 2021年09月29日 15:16/ 0 赞/ 249 阅读

相关 JavaScript input 事件

JavaScript input 事件 input 事件会在 `<input>`、`<select>` 和 `<textarea>` 等元素的值发生改变时触发。此事件会...

小灰灰/ 2020年06月02日 14:14/ 0 赞/ 714 阅读