uniapp组件-uni-search-bar搜索栏

比眉伴天荒 2021-07-25 15:09 2388阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=866][https_ext.dcloud.net.cn_plugin_id_866]

## 例1 -基础用法 ##

![20210228234726752.gif][]

<template>
    	<view>
    		<view>
    			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @input="input" @cancel="cancel" @change="change" @clear="clear">
    			</uni-search-bar>
    			当前输入为：{
       { searchValue }}
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				searchValue: '123123'
    			}
    		},
    		methods: {
    			search(res) {
    				uni.showToast({
    					title: '搜索：' + res.value,
    					icon: 'none'
    				})
    			},
    			input(res) {
    				console.log('----input:', res)
    			},
    			clear(res) {
    				uni.showToast({
    					title: 'clear事件，输入值为：' + res.value,
    					icon: 'none'
    				})
    			},
    			blur(res) {
    				uni.showToast({
    					title: 'blur事件，输入值为：' + res.value,
    					icon: 'none'
    				})
    			},
    			cancel(res) {
    				uni.showToast({
    					title: '点击取消，输入值为：' + res.value,
    					icon: 'none'
    				})
    			}
    		}
    	}
    </script>

注意：在微信小程序中使用该组件时，@blue和@clear会失效

## 例2-自定义placeholder ##

![2021022823524663.png][]=》![20210228235259339.png][]

## 例三-自定义Icon ##

![20210228235703864.png][]=》![20210228235725116.png][]

## 例四-控制 清除按钮/取消按钮 的显示和隐藏 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]=》![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[https_ext.dcloud.net.cn_plugin_id_866]: https://ext.dcloud.net.cn/plugin?id=866
[20210228234726752.gif]: https://img-blog.csdnimg.cn/20210228234726752.gif
[2021022823524663.png]: https://img-blog.csdnimg.cn/2021022823524663.png
[20210228235259339.png]: https://img-blog.csdnimg.cn/20210228235259339.png
[20210228235703864.png]: https://img-blog.csdnimg.cn/20210228235703864.png
[20210228235725116.png]: /images/20210725/9ad56444ffa4440fafdb840c6023e0e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210301000457546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210301000524733.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70