Search 검색 상자

원문 보기 위키 갱신 2026.10.11

검색 상자 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 데이터 집합에서 원하는 데이터를 찾을 때, 원하는 내용(또는 일부 내용)을 입력하면 일치하는 모든 검색 결과를 돌려 줘요.

기본 사용법

:::demo 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>

:::

검색 아이콘 왼쪽 배치

:::demo left, right로 Search 검색 아이콘 위치를 정의해요. 기본값은 right예요

<template>
  <div>
    <d-search icon-position="left" style="width: 200px" placeholder="请输入"></d-search>
  </div>
</template>

:::

테두리 없음

:::demo no-border로 Search의 테두리를 없애요

<template>
  <div>
    <d-search icon-position="left" no-border style="width: 200px"></d-search>
  </div>
</template>

:::

양방향 바인딩

:::demo 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 링크
size	SearchSizeType	'md'	선택, 검색창 크기	기본 사용법
placeholder	`string`	--	선택, 텍스트 입력창 placeholder	검색 아이콘 왼쪽 배치
max-length	`number`	--	선택, 입력창 max-length	양방향 바인딩
delay	`number`	300	선택, debounceTime 지연	기본 사용법
disabled	`boolean`	false	선택, 입력창 비활성화 여부	기본 사용법
auto-focus	`boolean`	false	선택, 입력창 자동 포커스 여부	기본 사용법
is-keyup-search	`boolean`	false	선택, 입력 값을 즉시 `search` 트리거 지원 여부	기본 사용법
icon-position	IconPositionType	'right'	선택, 검색 아이콘 위치	검색 아이콘 왼쪽 배치
no-border	`boolean`	false	선택, 테두리 표시 여부	테두리 없음
css-class	`string`	''	선택, 입력창에 클래스명 전달 지원	양방향 바인딩
show-glow-style	`boolean`	true	선택, 호버 발광 효과 표시 여부

Search 이벤트

이벤트명	타입	설명	Demo 링크
search	`string`	엔터 또는 검색 버튼 클릭 시 트리거되는 콜백 함수. 텍스트 입력창의 입력 값 반환	기본 사용법

Search 타입 정의

SearchSizeType

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

IconPositionType

type IconPositionType = 'right' | 'left';

더 알아보기 (Learn more)

size와 icon-position으로 크기와 아이콘 위치를 고르고, is-keyup-search와 delay로 입력 즉시 검색 타이밍을 조절할 수 있어요.