xtf-search

组件说明

xtf-search 是搜索输入组件，适用于商品、订单和内容检索；内置清除、取消、联想词、历史词和热词面板。 核心能力以当前 xtf-search.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <xtf-search :value="value" @update:value="value = $event" @search="onEvent" />
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <xtf-search
    :value="value"
    @update:value="value = $event"
    show-panel
    :suggestions="['订单异常', '订单退款']"
    :hot-keywords="['春季上新']"
    @select-suggestion="onEvent"
  />
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <xtf-search :value="value" @update:value="value = $event" preset="compact" :show-action="false">
    <template #prefix><xtf-tag label="全部" size="xs" /></template>
  </xtf-search>
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
value	[String, Number]	''	控制组件的 value 行为。	按业务需要设置。
placeholder	String	''	控制组件的 placeholder 行为。	按业务需要设置。
actionText	String	''	控制组件的 actionText 行为。	按业务需要设置。
showAction	Boolean	true	控制组件的 showAction 行为。	按业务需要设置。
actionVariant	String	'text'	控制组件的 actionVariant 行为。	按业务需要设置。
actionTheme	String	'primary'	控制组件的 actionTheme 行为。	按业务需要设置。
clearable	Boolean	true	控制组件的 clearable 行为。	按业务需要设置。
disabled	Boolean	false	控制组件的 disabled 行为。	按业务需要设置。
readonly	Boolean	false	控制组件的 readonly 行为。	按业务需要设置。
variant	String	'soft'	控制组件的 variant 行为。	按业务需要设置。
shape	String	'round'	控制组件的 shape 行为。	按业务需要设置。
preset	String	''	控制组件的 preset 行为。	按业务需要设置。
size	String	''	控制组件的 size 行为。	按业务需要设置。
height	[String, Number]	''	控制组件的 height 行为。	按业务需要设置。
barHeight	[String, Number]	''	控制组件的 barHeight 行为。	按业务需要设置。
iconPosition	String	'start'	控制组件的 iconPosition 行为。	按业务需要设置。
autoFocus	Boolean	false	控制组件的 autoFocus 行为。	按业务需要设置。
theme	String	'primary'	控制组件的 theme 行为。	按业务需要设置。
type	String	'text'	控制组件的 type 行为。	按业务需要设置。
confirmType	String	'search'	控制组件的 confirmType 行为。	按业务需要设置。
searchOnInput	Boolean	false	控制组件的 searchOnInput 行为。	按业务需要设置。
searchDebounce	[String, Number]	0	控制组件的 searchDebounce 行为。	按业务需要设置。
showPanel	Boolean	false	控制组件的 showPanel 行为。	按业务需要设置。
suggestions	Array	function() { return []	控制组件的 suggestions 行为。	按业务需要设置。
hotKeywords	Array	function() { return []	控制组件的 hotKeywords 行为。	按业务需要设置。
historyKeywords	Array	function() { return []	控制组件的 historyKeywords 行为。	按业务需要设置。
recentKeywords	Array	function() { return []	控制组件的 recentKeywords 行为。	按业务需要设置。
panelEmptyText	String	''	控制组件的 panelEmptyText 行为。	按业务需要设置。
suggestionTitle	String	''	控制组件的 suggestionTitle 行为。	按业务需要设置。
hotTitle	String	''	控制组件的 hotTitle 行为。	按业务需要设置。
historyTitle	String	''	控制组件的 historyTitle 行为。	按业务需要设置。
recentTitle	String	''	控制组件的 recentTitle 行为。	按业务需要设置。
closePanelOnSelect	Boolean	true	控制组件的 closePanelOnSelect 行为。	按业务需要设置。
customClass	String	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object]	''	控制组件的 customStyle 行为。	按业务需要设置。

---

事件

事件名称	触发时机	回调参数	参数说明
input	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('input', ...) 为准。
update:value	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('update:value', ...) 为准。
change	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('change', ...) 为准。
search	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('search', ...) 为准。
search-input	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('search-input', ...) 为准。
clear	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('clear', ...) 为准。
cancel	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('cancel', ...) 为准。
focus	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('focus', ...) 为准。
blur	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('blur', ...) 为准。
select-suggestion	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('select-suggestion', ...) 为准。

事件使用示例

<template>
  <xtf-search :value="value" @update:value="value = $event" @input="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

插槽

插槽名	说明	作用域参数
prefix	搜索输入框前置内容。	无
suffix	搜索输入框后置内容。	无

---

方法

无公开实例方法，通过 value 与事件控制。

---

主题说明

• var(--xtf-search-bar-height) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-search-bar-padding-x) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-surface) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-surface-muted) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-card-border) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-motion-base) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-motion-standard) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-search-bar-gap) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary-soft) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-glass) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-border) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-shadow-soft) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。