logpm/uni_modules/fant-mini-plus/components/hd-search-bar/INDEX.md

代码演示

基础用法

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>('')