Input

원문 보기 위키 갱신 2026.10.11

Input (입력창)

텍스트를 입력할 때 사용하는 입력창 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

사용자가 직접 텍스트를 입력해야 할 때 사용해요.

기본 사용법

:::demo v-model로 입력값을 양방향 바인딩하고, placeholder·autofocus처럼 네이티브 input이 지원하는 속성은 자동으로 상속돼요.

<template>
  <div class="devui-input-demo">
    <h4>Default</h4>

    <d-input v-model="valueBasic1" autofocus></d-input>

    <h4>Disabled</h4>

    <d-input v-model="valueBasic2" placeholder="请输入" disabled></d-input>

    <h4>Error</h4>

    <d-input v-model="valueBasic3" placeholder="请输入" error></d-input>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const valueBasic1 = ref('');
    const valueBasic2 = ref('');
    const valueBasic3 = ref('');
    return {
      valueBasic1,
      valueBasic2,
      valueBasic3,
    };
  },
});
</script>

:::

한 번에 내용 비우기

clearable 속성을 사용하면 클릭 한 번으로 내용을 비울 수 있는 입력창이 되고, clear 이벤트를 사용하면 지우기 버튼이 클릭됐을 때 원하는 동작을 수행할 수 있어요.

:::demo

<template>
  <div class="devui-input-demo">
    <d-input v-model="valueClear" clearable @clear="handleClear" placeholder="请输入"></d-input>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const handleClear = () => {
      console.log('clear');
    };
    const valueClear = ref('');
    return {
      valueClear,
      handleClear,
    };
  },
});
</script>

:::

비밀번호 입력창

show-password 속성을 사용하면 표시/숨김을 전환할 수 있는 비밀번호 입력창을 만들 수 있어요.

:::demo

<template>
  <div class="devui-input-demo">
    <d-input v-model="valuePsw" show-password placeholder="请输入"></d-input>
  </div>
</template>

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

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

:::

크기

:::demo sm, md, lg 세 가지 크기를 지원하고, 기본값은 md예요.

<template>
  <div>
    <h4>Small</h4>

    <d-input v-model="valueSm" size="sm" placeholder="请输入"></d-input>

    <h4>Middle</h4>

    <d-input v-model="valueMd" placeholder="请输入"></d-input>

    <h4>Large</h4>

    <d-input v-model="valueLg" size="lg" placeholder="请输入"></d-input>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const valueSm = ref('');
    const valueMd = ref('');
    const valueLg = ref('');
    return {
      valueSm,
      valueMd,
      valueLg,
    };
  },
});
</script>

:::

아이콘이 있는 입력창

입력창에 아이콘을 추가하려면 prefix와 suffix 속성을 간단히 사용하면 돼요. 또는 prefix와 suffix 슬롯을 사용할 수도 있어요.

:::demo

<template>
  <div>
    <d-row :gutter="10">
      <d-col :span="3">使用属性</d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon1" placeholder="请输入" suffix="close" />
      </d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon2" placeholder="请输入" prefix="search" />
      </d-col>
    </d-row>
    <d-row style="margin-top: 20px" :gutter="10">
      <d-col :span="3">使用插槽</d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon3" placeholder="请输入">
          <template #suffix>
            <d-icon name="close" style="font-size: inherit;"></d-icon>
          </template>
        </d-input>
      </d-col>
      <d-col :span="9">
        <d-input v-model="valueIcon4" placeholder="请输入">
          <template #prefix>
            <d-icon name="search" style="font-size: inherit;"></d-icon>
          </template>
        </d-input>
      </d-col>
    </d-row>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const valueIcon1 = ref('');
    const valueIcon2 = ref('');
    const valueIcon3 = ref('');
    const valueIcon4 = ref('');
    return {
      valueIcon1,
      valueIcon2,
      valueIcon3,
      valueIcon4,
    };
  },
});
</script>

:::

복합형 입력창

입력창 앞뒤에 요소를 추가할 수 있어요. 보통 라벨이나 버튼을 넣어요.

:::demo

<template>
  <div>
    <d-input v-model="valueSlot1" placeholder="请输入">
      <template #prepend>https://</template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot2" placeholder="请输入">
      <template #prepend>
        <d-select v-model="valueSlot5" :options="options"></d-select>
      </template>
      <template #append>
        <d-icon name="search" style="font-size: inherit;" />
      </template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot3" placeholder="请输入">
      <template #append>.com</template>
    </d-input>

    <d-input class="devui-input-demo__mt" v-model="valueSlot4" placeholder="请输入">
      <template #append>
        <d-button icon="search"></d-button>
      </template>
    </d-input>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const items = ['http://', 'https://'];
    const options = reactive(items);
    const valueSlot1 = ref('');
    const valueSlot2 = ref('');
    const valueSlot3 = ref('');
    const valueSlot4 = ref('');
    const valueSlot5 = ref('');
    return {
      valueSlot1,
      valueSlot2,
      valueSlot3,
      valueSlot4,
      valueSlot5,
      options,
    };
  },
});
</script>

:::

입력창 메서드

:::demo

<template>
  <div class="devui-input-demo">
    <d-input ref="demoInput" v-model="valueFunc" placeholder="请输入"></d-input>
    <d-button style="margin-top: 20px" @click="select" color="primary">选中input中的文字</d-button>
    <d-button style="margin-left: 10px" @click="focus" color="primary">使input获取焦点</d-button>
    <d-button style="margin-left: 10px" @click="blur" color="primary">使input失去焦点</d-button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const demoInput = ref(null);
    const select = () => {
      demoInput.value.select();
    };
    const focus = () => {
      demoInput.value.focus();
    };
    const blur = () => {
      demoInput.value.blur();
    };
    const valueFunc = ref('测试文本');
    return {
      demoInput,
      valueFunc,
      select,
      focus,
      blur,
    };
  },
});
</script>

:::

Input 파라미터

파라미터	타입	기본값	설명	Demo 링크
v-model	`string`	''	바인딩 값	기본 사용법
placeholder	`string`	''	입력창 플레이스홀더 텍스트	기본 사용법
disabled	`boolean`	false	선택, 텍스트 입력창 비활성화 여부	기본 사용법
error	`boolean`	false	선택, 텍스트 입력창 입력 오류 표시 여부	기본 사용법
size	InputSize	'md'	선택, 텍스트 입력창 크기. `'lg'`, `'md'`, `'sm'` 세 가지	크기
validate-event	`boolean`	true	선택, 입력 시 폼 검증 트리거 여부
prefix	`string`	-	선택, 접두사 아이콘 커스텀	아이콘 입력란
suffix	`string`	-	선택, 접미사 아이콘 커스텀	아이콘 입력란
show-password	`boolean`	false	선택, 비밀번호 입력창으로 표시 여부
clearable	`boolean`	false	선택, 비우기 가능 여부	한 번에 비우기
name	`string`	''	네이티브 input name 속성과 동등
readonly	`boolean`	false	네이티브 readonly 속성. 읽기 전용 여부
autocomplete	`string`	'off'	네이티브 autocomplete 속성
autofocus	`boolean`	false	자동 포커스 획득
show-glow-style	`boolean`	true	선택, 호버 발광 효과 표시 여부

Input 슬롯

이름	설명	Demo 링크
prefix	입력창 헤더 콘텐츠	아이콘 입력란
suffix	입력창 푸터 콘텐츠	아이콘 입력란
prepend	입력창 앞쪽 콘텐츠	복합형 입력란
append	입력창 뒤쪽 콘텐츠	복합형 입력란

Input 이벤트

이벤트명	콜백 파라미터	설명
focus	`Function(e: FocusEvent)`	포커스 획득 시 트리거
blur	`Function(e: FocusEvent)`	포커스 상실 시 트리거
input	`Function(e: Event)`	입력 값 변경 시 트리거
change	`Function(e: Event)`	입력창 포커스 상실 또는 엔터 입력 시 트리거
keydown	`Function(e: KeyboardEvent)`	키 입력 시 트리거
clear	-	`clearable` 속성으로 생성된 비우기 버튼 클릭 시 트리거

Input 메서드

메서드	설명	파라미터
focus	input에 포커스 부여	-
blur	input 포커스 해제	-
select	input 내 텍스트 선택	-

Input 타입 정의

InputSize

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

더 알아보기 (Learn more)

clearable, show-password, prefix/suffix 슬롯 등을 조합하면 실무에서 자주 쓰는 입력창을 금방 만들 수 있어요.