Search 搜索

用于搜索场景的输入框组件。

代码演示

基础用法

v-model用于控制搜索框中的内容，placeholder控制搜索框占位提示文字。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字"></hd-search-bar>

const keyword = ref<string>('')

禁用搜索框

通过disabled属性决定是否禁用搜索框，默认不禁用。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字" :disabled="true"></hd-search-bar>

const keyword = ref<string>('')

清空搜索框内容

通过clearable属性决定搜索框内容是否可以点击清空，默认存在点击清空按钮。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字" :clearable="false"></hd-search-bar>

const keyword = ref<string>('')

取消按钮

通过showCancel属性决定是否显示取消按钮，默认显示取消。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字" :showCancel="false"></hd-search-bar>

const keyword = ref<string>('')

事件监听

当点击键盘搜索或回车按钮后触发confirm事件；当点击清空按钮后触发clear事件；在showCancel为true时，点击取消后触发cancel事件。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字" @confirm="doConfirm" @cancel="doCancel" @clear="doClear"></hd-search-bar>

const keyword = ref<string>('')
function doConfirm(e) {
  console.log(e)
}
function doCancel(e) {
  this.keyword = ''
  uni.navigateBack({
    delta: 1
  })
}
function doClear() {
  this.keyword = ''
}

自定义输入框头部或尾部内容

使用prefix插槽可以自定义输入框头部内容，使用suffix插槽可以自定义输入框尾部内容。

<hd-search-bar v-model="keyword" placeholder="请输入搜索关键字">
  <view slot="prefix"></view>
  <view slot="suffix"></view>
</hd-search-bar>

const keyword = ref<string>('')

Props

Name	Description	Type	Required	Default
value	输入框的值	`String`	`false`	-
placeholder	占位文字	`String`	`false`	-
disabled	是否禁用输入框	`Boolean`	`false`	默认值是：`false`
showCancel	是否显示返回	`Boolean`	`false`	默认值是：`true`
clearable	是否可清空	`Boolean`	`false`	默认值是：`true`

Events

Event Name	Description	Parameters
update:modelValue	输入框内容发生变化时触发	value：输入框的内容，建议通过v-model双向绑定输入值，而不是监听此事件的形式
confirm	回车确认时触发	-
clear	清空输入值时触发	-
cancel	点击取消按钮时触发，仅在showCancel为true时生效	-
click	输入框被点击时触发，仅在disabled为false时触发	-

Slots

Name	Description	Default Slot Content
prefix	输入框头部内容	-
suffix	输入框尾部内容	-

# Search 搜索

# 代码演示

# 基础用法

# 禁用搜索框

# 清空搜索框内容

# 取消按钮

# 事件监听

# 自定义输入框头部或尾部内容

# Props

# Events

# Slots