Vue DevUI
主题

Search 搜索框

搜索框。

何时使用

当用户需要在数据集中搜索所需数据时，输入所需数据的内容（或部分内容），返回所有匹配内容的搜索结果。

基本用法

Small Middle Large Disabled
使用sm，''，lg来定义Search基本类型
<template>
  <div>
    Small
    <d-search class="mt-0 mb-2" size="sm" auto-focus style="width: 200px" @search="onSearch"></d-search>
    Middle
    <d-search class="mt-0 mb-2" style="width: 200px" is-keyup-search :delay="1000" @search="onSearch"></d-search>
    Large
    <d-search class="mt-0 mb-2" size="lg" style="width: 200px" @search="onSearch"></d-search>
    Disabled
    <d-search class="mt-0 mb-2" disabled style="width: 200px" @search="onSearch"></d-search>
  </div>
</template>
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {
      onSearch: (val) => {
        console.log(val);
      },
    };
  },
});
</script>

搜索图标左置

使用left，right来定义Search搜索图标位置， 默认right
<template>
  <div>
    <d-search icon-position="left" style="width: 200px" placeholder="请输入"></d-search>
  </div>
</template>

无边框

使用no-border来定义Search无边框
<template>
  <div>
    <d-search icon-position="left" no-border style="width: 200px"></d-search>
  </div>
</template>

双向绑定

使用v-model双向绑定
<template>
  <d-search css-class="ipt" v-model="searchText" :max-length="5" style="width: 200px"></d-search>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const searchText = ref('Devui');
    return {
      searchText,
    };
  },
});
</script>

Search 参数

参数名类型默认说明跳转 Demo
sizeSearchSizeType'md'可选，搜索框尺寸基本用法
placeholderstring--可选，输入框 placeholder搜索图标左置
max-lengthnumber--可选，输入框的 max-length双向绑定
delaynumber300可选，debounceTime 的延迟基本用法
disabledbooleanfalse可选，输入框是否被禁用基本用法
auto-focusbooleanfalse可选，输入框是否自动对焦基本用法
is-keyup-searchbooleanfalse可选，是否支持输入值立即触发 search基本用法
icon-positionIconPositionType'right'可选，搜索图标位置搜索图标左置
no-borderbooleanfalse可选，是否显示边框无边框
css-classstring''可选，支持传入类名到输入框上双向绑定

Search 事件

事件名类型说明跳转 Demo
searchstring回车或点击搜索按钮触发的回调函数，返回文本框输入的值基本用法

Search 类型定义

SearchSizeType 

type SearchSizeType = 'sm' | 'md' | 'lg';

IconPositionType 

type IconPositionType = 'right' | 'left';
Contributors
粤A2-20044005号