单选框|飞书低代码平台

单选框|飞书低代码平台

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
适用场景
radio,以平铺选项的形式展示选项,用户可进行选择操作。
使用说明
区域
说明
示意图
内容区
  • 模式
  • 默认值
  • 单选框的默认值类型是string | number | void 联合类型
  • 默认值会在组件初始化、重置、以及依赖的变量发生变化后生效
  • 拓展
  • 标题
250px|700px|reset
内容区示意图
250px|700px|reset
交互区
  • form data key
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。
比如,文本输入组件的「form data key」配置为"first_name",表单的data信息中会包含"first_name",并且其值为该文本输入组件的值,可以通过{ { form.data.first_name } }消费该组件的值
  • 同一个表单内有多个相同「form data key」时,均不会生效
  • 事件
  • 单选框只支持1种事件:「值改变时」
  • 校验
  • 校验时机:值改变时、表单提交时(如在表单内)
  • 校验内容:
  • 必填
  • 自定义校验规则
  • 可以通过js表达自定义校验规则
示例:{{self.value === 'test' ? 'error': ''} }
  • 只读
  • boolean类型
  • 禁用
  • boolean类型
  • 加载中
  • boolean类型
  • 隐藏
  • boolean类型,控制输入组件是否在页面上隐藏
250px|700px|reset
外观区
  • 选择方式
  • 单选器
250px|700px|reset
  • 按钮分段
250px|700px|reset
  • 卡片
250px|700px|reset
  • 排列方式
  • 垂直
  • 会以单列方式,竖向排列所有选项
  • 水平
  • 会横向排列选项,选项超出输入组件宽度会自动换行,单个选项最多占满一行
  • 多列
  • 可以设置成多列布局,可以定义排成几列,超出单列宽度的选项会折叠显示
250px|700px|reset
属性API
属性
类型
默认值
描述
label
object
{
textContent:"标题",
tooltipText:"",
wrapping:false,
layout:"top",
align:"left",
width:4,
unit:"col"
}
聚合标题相关的属性
聚合标题相关的属性,包含:
  1. 标题内容textContent
  1. 标题提示内容tooltipText
  1. 超出折行wrapping
  1. 标题文本对齐方式align
  1. 标题位置layout
  1. 标题宽度width
  1. 标题宽度单位unit
id
string
根据组件
组件ID
value
boolean | string | number
null
组件值(选项值)
如:'Option1'
formDataKey
string
自身id
值标识
disabled
boolean
false
是否禁用
hidden
boolean
false
是否隐藏
readOnly
boolean
false
是否只读
loading
boolean
false
是否显示加载中
rules
rule
根据组件
校验规则。必定包含「必填」和「自定义」校验。
validateStatus
string
success
校验状态(校验是否通过)
validationMessage
String
""
最近一次校验错误时显示的信息
invalid
boolean
false
校验是否失败
data
array
[]
选项的原始数据——注意,是选项的原始数据源
mode
'manual' | 'mapped'
manual
选项生成模式
options
array
[]
选项的数据——注意,是选项经过映射后的选项数据
selectedIndex
Number
null
已选项index
selectedLabel
string
undefined
已选项的名称
selectedItem
Object
null
已选项的数据
方法API
方法
setValue(value: boolean | string | number | void)
设置组件值
clearValue()
清空组件值
validate()
触发校验
clearValidation()
清空校验状态
reset()
重置组件值
setDisabled(disabled: boolean)
设置是否禁用
setLoading(loading:boolean)
设置是否加载中
setHidden(visible:boolean)
设置是否隐藏
setReadOnly(readOnly:boolean)
设置是否只读
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
联系我们立即试用