InputIcon 입력 상자

텍스트 입력 상자예요.

출처: 문서

본문

언제 사용하나요

직접 글자를 입력해야 할 때 사용해요.

name 속성

name 속성으로 icon 타입을 정의해요. 값은 icon 컴포넌트와 같아요. 자세한 목록은 https://devui.design/icon/ruleResource를 참고하세요

<d-input-icon name="calendar" />

icon-color·icon-bg-color 속성

• icon-color는 icon 색을 정의해요.

• icon-bg-color는 icon 영역의 배경색을 정의해요.

폰트 아이콘 특성상 약간의 레이아웃 밀림이 있어서, 배경을 입히면 이런 시각적 흔들림을 효과적으로 줄일 수 있어요.

<d-input-icon name="letter-a" icon-bg-color="#afa" icon-color="#33a" />

onIconclick 이벤트

아이콘 영역의 클릭에 반응해요.

<d-input-icon name="calendar" @iconclick="handleIconClick" />

원본 Input 컴포넌트 속성 전달하기

InputIcon 컴포넌트의 속성 정의는 Input 컴포넌트의 속성 정의 객체를 그대로 이어받아 확장한 거예요:

import { inputProps } from '../../input/src/use-input'
const inputIconProps = {
    ...inputProps,
    name: {
        type: String,
        value: 'calendar',
        required: false,
    },
    onIconclick: {
        type: Function as PropType<(e: MouseEvent) => void>,
        required: false,
    },
    iconBgColor: {
        type: String,
        value: 'transparent',
    },
    iconColor: {
        type: String,
        value: '#000000',
    }
}

컴포넌트를 사용할 때는 InputIcon 자체의 몇 가지 추가 속성을 빼고, 나머지 속성은 모두 내장 Input 컴포넌트로 그대로 전달해요. 이렇게 하면 Input 컴포넌트와 InputIcon 컴포넌트를 서로 바꿔 끼울 수 있다는 장점이 있어요.

setup(props, ctx) {
    // Rest剩余属性到inputProps对象
    const { name, onIconclick, onChange, iconBgColor, iconColor, ...inputProps } = props
    // ...
    const onInputChange = (v: string) => {
        state.value = v
        typeof onChange === 'function' && onChange(state.value)
    }
    // ...
    return () => {
        return (
            <div class="d-input-icon-container">
                <label>
                    <Input { ...inputProps } onChange={onInputChange} />
                </label>
                <span onClick={onIconClick} style={{ backgroundColor: iconBgColor }}>
                    <Icon size="small" name={name} color={iconColor} />
                </span>
            </div>
        )
    }
},

여기서 onInputChange를 한 번 더 감싸는 건, Input 컴포넌트의 상태를 로컬로 동기화하기 위해서예요.

더 알아보기 (Learn more)

InputIcon은 Input 컴포넌트를 그대로 확장한 구조라 Input 자리에 바꿔 끼울 수 있어요. name으로 아이콘을 고르고 onIconclick으로 클릭 이벤트를 처리하세요.