VEUI

VEUI on GitHub
Play!EnglishEN

SearchBox 搜索框

示例

风格

可供选用的 ui 属性值:strong

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-search-box class="search-box"/>
  <veui-search-box
    class="search-box"
    ui="strong"
  />
</article>
</template>

<script>
import { SearchBox } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  }
}
</script>

<style lang="less" scoped>
.search-box {
  margin-right: 1em;
}
</style>

尺寸

可供选用的 ui 属性值:xs / s / m / l

在 GitHub 上编辑此示例编辑
<template>
<article>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong xs"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong s"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong l"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="xs"
    />
    <veui-search-box
      class="search-box"
      ui="s"
    />
  </div>
  <div class="container">
    <veui-search-box class="search-box"/>
    <veui-search-box
      class="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;
  .search-box {
    margin-right: 1em;
  }
}
</style>

只读与禁用

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-radio-group
      v-model="state"
      :items="states"
    />
  </section>
  <section>
    <veui-search-box
      class="search-box"
      :readonly="isReadonly"
      :disabled="isDisabled"
    />
    <veui-search-box
      class="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;
}

.search-box {
  margin-right: 1em;
}
</style>

推荐列表

在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-search-box
    v-model="value"
    class="search-box"
    clearable
    :suggestions="suggestions"
    replace-on-select
    @select="handleSelect"
  />
  <veui-search-box
    v-model="value1"
    class="search-box"
    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>
.search-box {
  margin-left: 1em;
}
</style>

API

属性

名称类型默认值描述
uistring-

按钮预设样式。

描述
strong加强样式,搜索图标变成搜索按钮,背景为主题色。
xs特小尺寸样式。
s小尺寸样式。
m中等尺寸样式。
l大尺寸样式。
valuestring-

v-model

输入框的值。

disabledbooleanfalse是否为禁用状态。
readonlybooleanfalse是否为只读状态。
placeholderstring-搜索框占位符。
autofocusbooleanfalse是否自动聚焦。
clearablebooleanfalse是否显示清除按钮。
select-on-focusbooleanfalse聚焦时是否自动选择文本。
compositionbooleanfalse是否感知输入法状态。
autofocusbooleanfalse是否自动聚焦。
suggestionsArray<string>|Array<Object>-

推荐列表。列表项为 Object 时格式为 {label, value}

名称类型描述
labelstring推荐项文本。
valuestring推荐项值。
replace-on-selectbooleantrue选择推荐项时是否自动使用其内容填充文本框。
maxlengthnumber-最大可输入的字符长度。
get-lengthfunction(string): number-自定义的字符长度计算函数。
strictbooleanfalse是否超出最大字符长度后不允许继续输入。
trimboolean | stringfalse

是否移除前后空格。当为 true 时,会移除前后空格,当为 false 时,不移除前后空格。设置为字符串时,按指定方式进行移除。

描述
both移除两端空格。等同于 true 时的行为。
start移除开始空格。
end移除末尾空格。
suggest-triggerArray<string>|stringinput

展示推荐列表的触发时机。可以是枚举值,也可以枚举值的组合。

描述
focus输入框聚焦时。
input输入框触发 input 事件时。
submit点击搜索按钮时。
expandedbooleanfalse

.sync

建议面板是否展开(如果 suggestions 中没有待选项,则即使为 true 时面板也会关闭)。

match(item, keyword, { ancestors }) => boolean | Array<[number, number]>-支持自定义高亮逻辑, 默认大小写不敏感,参考 Autocomplete
filter(item, keyword, { ancestors, offsets }) => boolean-支持自定义搜索命中逻辑,参考 Autocomplete
overlay-classstring | Array | Object-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object-参考 Overlay 组件的 overlay-style 属性。

插槽

名称描述
suggestions

推荐列表内容。

名称类型描述
suggestionsArray<{value: string, label: string}>suggestions 属性归一化类型后的推荐列表。
selectfunction(suggestion: {value: string, label: string}): void选择指定的推荐项。
suggestions-before插入推荐列表前的内容。
suggestions-after插入推荐列表后的内容。
suggestion

推荐列表的单项插槽,用来定制选项内容。

名称类型描述
labelstring选项文本。
valuestring选项值。

suggestions 中的每一项,除了 labelvalue 外的字段也会自动通过 v-bind 进行绑定。

suggestionsArray<string> 类型时,labelvalue 均为单项 string 值。

clear点击清除按钮时触发。
group-label可以参考 Select 组件的 group-label 属性。
option-label可以参考 Select 组件的 option-label 属性。

事件

名称描述
input输入框中文本发生变化时触发该事件,回调参数为 (value: string)value 为输入框的值。
suggest需要展示推荐列表时触发,回调参数为 (value: string)value 为输入框的值。
select选择推荐列表某个选项时触发,回调参数为 (item: {label: string, value: string, ...})item 为单个选项对象。
search

输入内容被提交时触发,回调参数为 (value: string, event: Event)

名称类型描述
valuestring输入框的值。
eventEvent原生点击事件。
toggle提示面板展开状态切换时触发,回调参数为 (expanded: boolean)expanded 表示操作将触发提示面板展开还是收起。

图标

名称描述
search搜索。

自定义样式

名称类型默认值描述
--dls-dropdown-max-display-items<integer>8

下拉选项同时显示的最大项目数,下拉框的最大高度将由此计算得出。

在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024