SearchBox 搜索框
示例
风格
可选的 ui
属性值:strong
。
<template>
<article>
<veui-search-box/>
<veui-search-box ui="strong"/>
</article>
</template>
<script>
import { SearchBox } from 'veui'
export default {
components: {
'veui-search-box': SearchBox
}
}
</script>
<style lang="less" scoped>
.veui-search-box {
margin-right: 1em;
}
</style>
尺寸
可选的 ui
属性值:xs
/ s
/ m
/ l
。
<template>
<article>
<div class="container">
<veui-search-box ui="strong xs"/>
</div>
<div class="container">
<veui-search-box ui="strong s"/>
</div>
<div class="container">
<veui-search-box ui="strong"/>
</div>
<div class="container">
<veui-search-box ui="strong l"/>
</div>
<div class="container">
<veui-search-box ui="xs"/>
<veui-search-box ui="s"/>
</div>
<div class="container">
<veui-search-box/>
<veui-search-box ui="l"/>
</div>
</article>
</template>
<script>
import { SearchBox } from 'veui'
export default {
components: {
'veui-search-box': SearchBox
}
}
</script>
<style lang="less" scoped>
.container {
margin-bottom: 1em;
.veui-search-box {
margin-right: 1em;
}
}
</style>
只读与禁用
<template>
<article>
<section>
<veui-radio-group
v-model="state"
:items="states"
/>
</section>
<section>
<veui-search-box
:readonly="isReadonly"
:disabled="isDisabled"
/>
<veui-search-box
:readonly="isReadonly"
:disabled="isDisabled"
ui="strong"
/>
</section>
</article>
</template>
<script>
import { SearchBox, RadioGroup } from 'veui'
export default {
components: {
'veui-search-box': SearchBox,
'veui-radio-group': RadioGroup
},
data () {
return {
state: null,
states: [
{
label: 'Normal',
value: null
},
{
label: 'Read-only',
value: 'readonly'
},
{
label: 'Disabled',
value: 'disabled'
}
]
}
},
computed: {
isReadonly () {
return this.state === 'readonly'
},
isDisabled () {
return this.state === 'disabled'
}
}
}
</script>
<style lang="less" scoped>
section {
margin-bottom: 1em;
}
.veui-search-box {
margin-right: 1em;
}
</style>
推荐列表
<template>
<article>
<veui-search-box
v-model="value"
clearable
:suggestions="suggestions"
replace-on-select
@select="handleSelect"
/>
<veui-search-box
v-model="value1"
ui="strong"
clearable
:suggestions="suggestions1"
replace-on-select
@select="handleSelect"
/>
</article>
</template>
<script>
import { SearchBox, toast } from 'veui'
export default {
components: {
'veui-search-box': SearchBox
},
data () {
return {
value: '',
value1: '',
browsers: [
'Google Chrome',
'Apple Safari',
'Microsoft Edge',
'Mozilla Firefox',
'Opera',
'Vivaldi',
'Internet Explorer',
'Maxthon',
'Android Browser',
'UC Browser',
'Samsung Internet',
'QQ Browser'
]
}
},
computed: {
suggestions () {
if (!this.value) {
return []
}
return this.browsers.filter(browser => {
return browser.toLowerCase().indexOf(this.value.toLowerCase()) !== -1
})
},
suggestions1 () {
if (!this.value1) {
return []
}
return this.browsers.filter(browser => {
return browser.toLowerCase().indexOf(this.value1.toLowerCase()) !== -1
})
}
},
methods: {
handleSelect ({ value }) {
toast.info(value)
}
}
}
</script>
<style lang="less" scoped>
.veui-search-box {
margin-left: 1em;
}
</style>
API
属性
名称 | 类型 | 默认值 | 描述 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ui | string= | - | 按钮预设样式。
| ||||||||||||
placeholder | string | - | 搜索框占位符。 | ||||||||||||
value | string | - |
输入框的值。 | ||||||||||||
autofocus | boolean | false | 是否自动聚焦。 | ||||||||||||
clearable | boolean | false | 是否显示清除按钮。 | ||||||||||||
select-on-focus | boolean | false | 聚焦时是否自动选择文本。 | ||||||||||||
composition | boolean | false | 是否感知输入法状态。 | ||||||||||||
suggestions | Array<string>|Array<Object> | - | 推荐列表。列表项为
| ||||||||||||
replace-on-select | boolean | true | 选择推荐项时是否自动使用其内容填充文本框。 | ||||||||||||
suggest-trigger | Array<string>|string | input | 展示推荐列表的触发时机。可以是枚举值,也可以枚举值的组合。
| ||||||||||||
expanded | boolean= | false |
建议面板是否展开(如果 | ||||||||||||
disabled | boolean= | false | 是否为禁用状态。 | ||||||||||||
readonly | boolean= | false | 是否为只读状态。 | ||||||||||||
match | (item, keyword, { ancestors }) => boolean | Array<[number, number]> | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 Autocomplete 。 | ||||||||||||
filter | (item, keyword, { ancestors, offsets }) => boolean | - | 支持自定义搜索命中逻辑,参考 Autocomplete 。 |
插槽
名称 | 描述 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
suggestions | 推荐列表内容。
| |||||||||
suggestions-before | 插入推荐列表前的内容。 | |||||||||
suggestions-after | 插入推荐列表后的内容。 | |||||||||
suggestion | 推荐列表的单项插槽,用来定制选项内容。
当 |
事件
名称 | 描述 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
input | 输入框中文本发生变化时触发该事件,回调参数为
| |||||||||
suggest | 需要展示推荐列表时触发,回调参数为
| |||||||||
select | 选择推荐列表某个选项时触发,回调参数为
| |||||||||
search | 输入内容被提交时触发,回调参数为
| |||||||||
toggle | 提示面板展开状态切换时触发,回调参数为 (expanded: boolean) 。expanded 表示操作将触发提示面板展开还是收起。 |
图标
名称 | 描述 |
---|---|
search | 搜索。 |