Search 搜索框

全端通用搜索输入框组件，支持搜索建议面板联想、右侧搜索/取消操作按钮、清除图标与极奢圆角变体。

---

代码示例

1. 基础用法 (Basic Search)

<template>
  <mu-search v-model="keyword" placeholder="搜索商品或服务" @search="onSearch" />
</template>

<script setup>
import { ref } from 'vue'

const keyword = ref('')
const onSearch = (val) => console.log('触发搜索:', val)
</script>

---

2. 带搜索按键与搜索联想 (Action Button & Suggestions)

<template>
  <mu-search
    v-model="query"
    placeholder="输入关键字"
    show-action
    action-text="搜索"
    :suggestions="['Muzhiyu UI', 'ThorUI', 'Vue 3', 'UniApp']"
    @search="onSearch"
    @action-click="onActionClick"
  />
</template>

<script setup>
import { ref } from 'vue'

const query = ref('')
const onSearch = (val) => console.log('提交搜索:', val)
const onActionClick = () => console.log('点击右侧按钮')
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model / modelValue / value	当前绑定的搜索文本字符串	String	-	''
placeholder	占位提示文案	String	-	'搜索'
disabled	是否禁用输入	Boolean	true | false	false
clearable	是否显示一键清除图标	Boolean	true | false	true
showAction	聚焦时是否显示右侧操作按钮	Boolean	true | false	false
alwaysShowAction	是否始终显示右侧操作按钮	Boolean	true | false	false
actionText	右侧操作按钮文案	String	-	'搜索'
autofocus	是否自动聚焦弹起键盘	Boolean	true | false	false
suggestions	搜索自动联想建议文本列表	Array	-	[]
shape	搜索框边框形状	String	round | radius	'round'
background	自定义输入框背景色	String	-	''

---

事件说明 (Events)

事件名	说明	回调参数
update:modelValue / update:value	双向绑定更改变	(value: String)
input	输入字符发生变化时触发	(value: String)
change	修改文本后触发	(value: String)
search	按键盘搜索键或点击搜索触发	(value: String)
focus	获得输入焦点时触发	(event: Event)
blur	失去输入焦点时触发	(event: Event)
clear	点击一键清除按键时触发	-
action-click	点击右侧操作按钮时触发	(value: String)

---

插槽说明 (Slots)

插槽名	说明
icon	自定义左侧搜索图标区域
action	自定义右侧操作按钮区域