标准对象表单选择类字段Cell
# 标准对象表单选择类字段Cell
标准对象表单选择类交互字段的基础UI组件。
效果展示:
# 组件引用路径 avaComponent://objformpkgbase/widget/SelectCell/index
# properties
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fieldAlign | 字段对齐方式(必须,否则不渲染) | String | left|top_and_bottom|center | — |
label | 字段名称 | String | — | — |
placeholder | 字段值为空时占位提示 | String | — | — |
value | 字段值,richTextMode=true时,支持微信rich_text组件nodes格式 | String | Array | — |
richTextMode | 字段值富文本模式 | Function | — | — |
isReadonly | 设置为只读样式 | Boolean | — | false |
isRequired | 设置为必填样式 | Boolean | — | false |
hidden | 设置为隐藏 | Boolean | — | false |
helpText | 帮助信息 | String | — | — |
isTileHelpText | 帮助信息平铺样式 | Boolean | — | false |
commonProps | 一些通用属性(如果上下文中有请透传) | Object | — | — |
toastText | 字段底部异常提示文案 | String | — | — |
showDelete | 控制显示字段值后边的删除按钮 | Boolean | — | false |
noLine | 隐藏字段底部分割线 | Boolean | — | false |
labelRightBtns | 字段标题右侧按钮(仅fieldAlign=top_and_bottom时生效) [{label:'',icon:'fxui_all中的icon class',style:'', onClick:()=>{}}] | Array | — | — |
topHigh | 字段背景高亮 | Boolean | — | false |
# 简单使用
com/index.wxml
<selectcell fieldAlign="left" label="字段名称" value="字段值" bindtap="_handleValueClick"/>
com/index.json
{
"component": true,
"usingComponents": {
"selectcell": "avaComponent://objformpkgbase/widget/SelectCell/index"
}
}
效果展示:
# 组件扩展
为了满足企业定制化的需求,这里我们为开发者提供了一些扩展方式,能够快速开发出相应功能。
# 组件插槽
组件插槽允许开发人员将某个组件插入到selectcell预定的区域。
<selectcell fieldAlign="left" label="字段名称" value="字段值" bindtap="_handleValueClick">
<view slot="top">字段top区域slot</view>
<view slot="footer">字段footer区域slot</view>
</selectcell>