输入框是高级交互组件的一种,支持自定义输入框的背景颜色、文本样式、边框样式以及多种状态下输入框按键的样式等,可以作为输入表单在大屏中使用,将用户的输入提交到后端进行处理。本文档为您介绍输入框各配置项的含义,帮助您快速准确地使用输入框组件。

样式

  • 输入框样式

    • 提示文字:输入框显示的提示文本内容,也可以在数据中进行配置。
      说明
      • 提示文字内容获取优先级是:数据 >配置
      • 只有清空数据面板中value字段里面的内容后,组件才会显示配置面板中提示文字的内容。
    • 缩进:输入框内提示文字的缩进。
    • 输入框背景颜色:输入框的背景颜色,可参考颜色选择器说明进行修改。
    • 文本样式:输入框中文本的样式。
      • 颜色:输入框中文本的颜色。
      • 字体样式:文本的字体样式,包括normalitalicoblique
      • 字体粗细:文本的字体粗细。
      • 字体:文本的字体系列。
        说明 请选择您系统中已经安装的字体,如果您系统中没有选择的字体,组件文本会显示为默认的字体样式。
      • 字号:文本的字体大小。
    • 边框样式
        • 边框宽度:边框的宽度,单位为px。
        • 边框颜色:边框的颜色。
        • 边框圆角:边框的圆角,取值范围为0到360。数值为0时输入框为方形,数值为360时输入框为圆形。
        • 线条类型:边框的线条类型。包括实线虚线点线双实线雕刻效果浮雕效果陷入效果突出效果
  • 按键样式:输入框右侧的按键样式。

    • 输入框文本内容:按键的文本内容。
    • 按键宽度:按键的宽度。
      注意 宽度设置过小会导致按键的文本溢出。
    • 普通样式
      • 背景颜色:按键的背景颜色。
      • 边框样式
        • 边框宽度:按键边框的宽度。
        • 边框颜色:按键边框的颜色。
        • 边框圆角:按键边框的圆角,取值范围为0到360。数值为0的时候按键为方形,数值为360时按键为圆形。
        • 线条类型:线条的类型。包括实线虚线点线双实线雕刻效果浮雕效果陷入效果突出效果
      • 文字样式
        • 颜色:按键文本的颜色。
        • 字体样式:文本的字体样式。包括normalitalicoblique
        • 字体粗细:文本的字体粗细。包括normalboldbolderlighter
        • 字体:文本的字体系列,默认为sans-serif
          说明 请选择您系统中已经安装的字体,如果您系统中没有选择的字体,组件文本会显示为默认的字体样式。
        • 字号:文本的字体大小。
    • 点击样式:鼠标单击输入框按键时的样式,请参考普通样式进行配置。
    • 悬停样式:鼠标悬停在输入框按键上时的样式,请参考普通样式进行配置。

数据



  • value:输入框中显示的内容,配置后会覆盖样式中提示文字的内容。可以为空,会读取样式配置中的内容。

交互

勾选输入框变化事件右侧的启用,开启组件交互功能。输入框组件拥有交互配置,可改变输入框中的内容,触发数据请求,抛出回调值,然后在其他组件中配置使用。

默认抛出数据面板中配置的 value 值,具体配置请参考组件回调ID配置

节点编程交互配置

在大屏编辑页面中,单击顶部菜单栏的配置节点编程图标,进入输入框的节点编程配置页面。可以看到如下图所示的输入框的节点编程配置参数。

  • 事件
    • 当数据接口请求完成时

      数据接口请求返回并经过过滤器处理后抛出的事件,同时抛出处理后的JSON格式的数据。具体数据可参见上文的数据示例

    • 当前值变化时

      当前值发生变化时抛出的事件,同时抛出该值对应的数据项。

  • 动作
    • 请求数据接口

      重新请求服务端数据,上游转换器或图层节点抛出的数据将作为参数。例如输入框配置了API数据源为http://api.test,传到请求数据接口动作的数据为{ id: '1'},则最终请求接口为http://api.test?id=1

    • 导入数据接口

      按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。具体数据可参见上文的数据示例

    • 获取当前输入框值

      表示获取当前输入框中的值。

    • 清空组件到默认值

      表示还原到默认选中的值。

    • 更新组件配置

      动态更新组件的样式配置。需要首先在组件的配置面板中,单击复制配置到剪贴板,获取组件配置数据。再根据需要在节点编程配置页面的转换器中更改对应样式的字段值。

    • 显示

      显示组件,不需要参数。

    • 隐藏

      隐藏组件,不需要参数。