# 多行输入

与单行输入相比,多行输入可调整大小,可设置水平可调整、竖直和调整、或全部可调整;用户在输入时可以手动调整输入框的大小以适应输入的内容。

image-20230301143222993

# 概念说明

# 主要属性

组件通用属性请参见组件通用说明

  • 值:当前多行输入组件,输入框内的本文内容。

  • 清除按钮:是否可清空。开启并在输入框有内容时会显示清空按钮。

    image-20230306183820252
  • 占位符:输入框为空时的提示文本。

  • 可输入最大字符数:输入框内可输入的最大字符数,超过时不支持输入。

  • 显示字数统计:开启后,会在组件上显示当前输入字数以及最大字符数,当前输入字数超过最大字符数时,不支持输入。

  • 字数统计位置:显示字数统计开启后,支持选择字数统计位置:输入框内、输入框外。

  • 自动获取焦点:进入页面时,自动选中该输入框。

  • 尺寸:设置多行输入框大小。支持正常,中型,大,巨大,占满五种尺寸。

  • 调整大小:设置多行输入框是否可以调整大小。包括:不可调整,可调整,水平可调整,竖直可调整四种设置。

  • 自适应内容高度:可输入如{maxHeight:100,minHeight:50},单位默认为px,不设置则根据输入内容自适应。

  • 只读:正常显示,但禁止选择或输入。

  • 禁用:置灰显示,且禁止任何交互(焦点、点击、选择、输入等)。

    image-20230306183925254

# 组件事件

  • 支持基本的鼠标事件:聚焦后和失焦后。
事件名 触发条件
聚焦后 多行组件输入框聚焦时触发
失焦后 多行组件输入框失焦时触发
  • 支持输入组件常见的事件:输入前,输入时,改变后,清空前,清空后。
事件名 触发条件
输入前 多行组件输入框输入前触发
输入时 多行组件输入框输入后触发
改变后 多行组件输入框值改变后触发
清空前 多行组件输入框清空前触发
清空后 多行组件输入框清空后触发

# 样式

样式说明请参见组件通用说明

# 主题样式

  • 宽度
    • width:文本框高度,如 1px。默认值240px。
    • min-width:文本框最小宽度,如 1px。默认值240px。
  • 高度
    • height:文本框高度,如 1px。默认值100px。
    • min-height:文本框最小高度,如 1px。默认值32px。
  • 内边距
    • padding:文本框内边距,如 1px。padding包含4个值,按顺序是上边距、右边距、下边距、左边距,数值个数可以是1至4个。1个表示所有边距值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值5px 10px。
  • 圆角 border-radius:文本框圆角,如 1px。border-radius包含4个值,按顺序是上圆角、右圆角、下圆角、左圆角,数值个数可以是1至4个。1个表示所有圆角值都相等,2个表示上下同一个值左右同一个值,3个表示左右同一个值。默认值4px。
  • 边框颜色
    • border-color:文本框边框颜色,如 #223325。默认值#e5e5e5。
    • border-color-focus:鼠标聚焦到文本框时边框的颜色值,如 #223325。默认值#4c88FF。
    • border-color-disabled:当文本框是禁用状态时的边框颜色值,如 #223325。默认值#e5e5e5。
  • 背景颜色
    • background:文本框背景色,如 #223325。默认值#fff。
    • background-disabled:禁用文本框背景色,如 #223325。默认值#F7F8FA。
  • 文字颜色
    • color:输入框文字颜色,如 #223325。默认值#333。
    • color-disabled:禁用输入框文字颜色,如 #223325。默认值#999。
    • placeholder-color:文本框提示内容文字颜色,如 #223325。默认值#ccc。
  • 边框阴影
    • box-shadow-focus:鼠标聚焦到输入框时边框的阴影效果值,如 2px 2px 2px 1px rgba(0, 0, 0, 0.2)。默认值0 0 0 2px rgba(77, 136, 255, 0.2)。
    • box-shadow-focus-color:鼠标聚焦到输入框时边框的阴影颜色,如 #223325。默认值rgba(77, 136, 255, 0.2)
上次更新: 2023年06月27日