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组件中同步状态到本地。