官方示例:https://ext.dcloud.net.cn/plugin?id=866
例1 -基础用法
<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
=》
<template>
<view>
<view class="example-body">
<uni-search-bar placeholder="自定义placeholder" cancel-text="cancel" />
<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE"/>
<uni-search-bar radius="100" placeholder="自定义圆角" />
</view>
</view>
</template>
例三-自定义Icon
=》
<template>
<view>
<uni-search-bar placeholder="自定义searchIcon">
<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
</uni-search-bar>
<uni-search-bar placeholder="自定义clearIcon">
<view slot="clearIcon" style="color: #999999">X</view>
</uni-search-bar>
</view>
</template>
例四-控制 清除按钮/取消按钮 的显示和隐藏
=》
<template>
<view>
<uni-search-bar radius="5" placeholder="清除按钮和取消按钮一直显示" clearButton="always" cancelButton="always" />
<uni-search-bar radius="5" placeholder="清除按钮自动显示隐藏,取消按钮不显示" clearButton="auto" cancelButton="none"/>
<uni-search-bar radius="100" placeholder="清除按钮和取消按钮一直隐藏" clearButton="none" cancelButton="none"/>
<uni-search-bar radius="100" placeholder="清除按钮不显示,取消按钮自动显示隐藏" clearButton="none" cancelButton="auto"/>
</view>
</template>