HumanBreak/docs/api/user-client-modules/组件 Input.md

Input 输入框组件 API 文档

本文档由 DeepSeek 生成并微调。

组件描述

输入框组件用于接收用户的文本输入，支持单行和多行模式，提供边框样式自定义和实时/确认两种值变化事件。

---

Props 属性说明

属性名	类型	默认值	描述
placeholder	string	-	输入框的提示内容
value	string	-	输入框的值
multiline	boolean	false	是否是多行输入，多行输入时允许换行
border	string	-	边框颜色
circle	RectRCircleParams	-	边框圆角
borderWidth	number	-	边框宽度
pad	number	-	内边距
继承自 TextContentProps	-	-	查看完整属性

---

Events 事件说明

事件名	参数类型	触发时机
change	(value: string)	当输入框的值被确认时触发，例如失焦时
input	(value: string)	当输入框的值发生改变时触发，例如实时输入
update:value	(value: string)	v-model 双向绑定事件

---

Slots 插槽说明

无插槽

---

Exposed Methods 暴露方法

无暴露方法

---

使用示例

基础用法 - 单行输入框

import { defineComponent, ref } from 'vue';
import { Input } from '@user/client-modules';

export const MyCom = defineComponent(() => {
    const inputValue = ref('');

    const handleChange = (value: string) => {
        console.log('输入确认:', value);
    };

    const handleInput = (value: string) => {
        console.log('实时输入:', value);
    };

    return () => (
        <Input
            placeholder="请输入文本"
            v-model={inputValue.value}
            onChange={handleChange}
            onInput={handleInput}
            loc={[208, 208, 300, 40, 0.5, 0.5]}
            border="#ccc"
            borderWidth={1}
            circle={[4]}
            pad={8}
        />
    );
});

多行文本输入

import { defineComponent, ref } from 'vue';
import { Input } from '@user/client-modules';

export const MyCom = defineComponent(() => {
    const multilineValue = ref('');

    return () => (
        <Input
            multiline
            placeholder="请输入多行文本..."
            v-model={multilineValue.value}
            loc={[208, 208, 300, 120, 0.5, 0.5]}
            border="#007acc"
            borderWidth={2}
            circle={[8]}
            pad={12}
        />
    );
});

---

注意事项

1. 事件区别：input 事件在每次输入时触发，change 事件在失焦或确认时触发
2. 多行模式：启用 multiline 后支持换行输入，高度需要足够容纳多行文本
3. 样式继承：支持从 TextContentProps 继承文本相关样式属性