列表框ui/listBox
显示项列表供用户选择。
基本用法
import { VNode, render } from "ui/control";
import ListBox, { ListItem } from "ui/listBox";
render(
__root__,
<ListBox onChange={console.log} value="B">
<ListItem key="A">A</ListItem>
<ListItem key="B">B</ListItem>
<ListItem key="C">C</ListItem>
<ListItem key="D">D</ListItem>
</ListBox>
);
样式
基本样式
<ul class="x-listbox">
<li data-key="A"><a href="javascript:;">A</a></li>
<li data-key="B" class="x-listbox-selected"><a href="javascript:;">B</a></li>
<li data-key="C"><a href="javascript:;">C</a></li>
<li data-key="D"><a href="javascript:;">D</a></li>
</ul>
状态
<ul class="x-listbox x-listbox-readonly">
<li data-key="A"><a href="javascript:;">A</a></li>
<li data-key="B" class="x-listbox-selected"><a href="javascript:;">B</a></li>
<li data-key="C"><a href="javascript:;">C</a></li>
<li data-key="D"><a href="javascript:;">D</a></li>
</ul>
<ul class="x-listbox x-listbox-disabled">
<li data-key="A"><a href="javascript:;">A</a></li>
<li data-key="B" class="x-listbox-selected"><a href="javascript:;">B</a></li>
<li data-key="C"><a href="javascript:;">C</a></li>
<li data-key="D"><a href="javascript:;">D</a></li>
</ul>
API
List 类
继承自:Input
表示一个列表框基类。
字段 | 类型 | 描述 | 继承自 |
---|---|---|---|
⮞
items
: ListItem[]
所有项。 |
ListItem[]
|
所有项。 |
— |
⮞
selectedItem
: ListItem
选中的第一项。 |
ListItem
|
选中的第一项。 |
— |
⮞
selectedIndex
: number
选中的第一项的索引。 |
number
|
选中的第一项的索引。 |
— |
⮞
readOnly
: boolean
|
boolean
|
(已覆盖)是否只读。 |
Input |
⮞
disabled
: boolean
|
boolean
|
(已覆盖)是否禁用。 |
Input |
⮞
body
: HTMLElement
|
HTMLElement
|
(已覆盖)(只读)获取用于包含子控件和节点的根元素。 |
Input |
⮞
input
: HTMLInputElement
|
HTMLInputElement
|
(只读)内部关联的输入框元素。 |
Input |
⮞
name
: string
|
string
|
名字。 |
Input |
⮞
value
: any
|
any
|
值。 |
Input |
⮞
defaultValue
: any
|
any
|
默认值。 |
Input |
⮞
type
: string
|
string
|
输入框的类型。 |
Input |
⮞
placeholder
: string
|
string
|
未输入内容时的占位符。 |
Input |
⮞
tabIndex
: number
|
number
|
TAB 键切换顺序。 |
Input |
⮞
tabStop
: boolean
|
boolean
|
是否允许 TAB 键停靠。 |
Input |
⮞
onCopy
: (e: ClipboardEvent, sender: List) => void
|
function
|
复制事件。 |
Input |
⮞
onCut
: (e: ClipboardEvent, sender: List) => void
|
function
|
剪切事件。 |
Input |
⮞
onPaste
: (e: ClipboardEvent, sender: List) => void
|
function
|
粘贴事件。 |
Input |
⮞
onBeforeCopy
: (e: ClipboardEvent, sender: List) => void
|
function
|
即将复制事件。 |
Input |
⮞
onBeforeCut
: (e: ClipboardEvent, sender: List) => void
|
function
|
即将剪切事件。 |
Input |
⮞
onBeforePaste
: (e: ClipboardEvent, sender: List) => void
|
function
|
即将粘贴事件。 |
Input |
⮞
onFocus
: (e: FocusEvent, sender: List) => void
|
function
|
获取焦点事件。 |
Input |
⮞
onBlur
: (e: FocusEvent, sender: List) => void
|
function
|
失去焦点事件。 |
Input |
⮞
onFocusIn
: (e: FocusEvent, sender: List) => void
|
function
|
当前元素和子元素获取焦点事件。 |
Input |
⮞
onFocusOut
: (e: FocusEvent, sender: List) => void
|
function
|
当前元素和子元素失去焦点事件。 |
Input |
⮞
onInput
: (e: Event, sender: List) => void
|
function
|
输入事件。 |
Input |
⮞
onChange
: (e: Event, sender: List) => void
|
function
|
更改事件。 |
Input |
⮞
onKeyDown
: (e: KeyboardEvent, sender: List) => void
|
function
|
键盘按下事件。 |
Input |
⮞
onKeyPress
: (e: KeyboardEvent, sender: List) => void
|
function
|
键盘点击事件。 |
Input |
⮞
onKeyUp
: (e: KeyboardEvent, sender: List) => void
|
function
|
键盘按上事件。 |
Input |
⮞
onEnter
: (e: KeyboardEvent, sender: List) => void
|
function
|
回车事件。 |
Input |
⮞
status
: Status
|
Status
|
控件状态。 |
Input |
⮞
statusClassPrefix
: string
|
string
|
控件状态前缀。 |
Input |
⮞
hideSuccess
: boolean
|
boolean
|
是否隐藏验证成功状态。 |
Input |
⮞
noValidate
: boolean
|
boolean
|
是否禁用验证。 |
Input |
⮞
validateEvent
: string
|
string
|
触发验证的事件。 |
Input |
⮞
required
: boolean
|
boolean
|
字段是否必填。 |
Input |
⮞
requiredMessage
: string
|
string
|
字段不满足必填时的提示文案。 |
Input |
⮞
maxLength
: number
|
number
|
最大长度。-1 表示不限制。 |
Input |
⮞
maxLengthMessage
: string
|
string
|
字段不满足最大长度时的提示文案。 |
Input |
⮞
minLength
: number
|
number
|
最小长度。-1 表示不限制。 |
Input |
⮞
minLengthMessage
: string
|
string
|
字段不满足最小长度时的提示文案。 |
Input |
⮞
max
: any
|
any
|
最大值。 |
Input |
⮞
maxMessage
: string
|
string
|
字段不满足最大值时的提示文案。 |
Input |
⮞
min
: any
|
any
|
最小值。 |
Input |
⮞
minMessage
: string
|
string
|
字段不满足最小值时的提示文案。 |
Input |
⮞
pattern
: RegExp
|
RegExp
|
匹配格式的正则表达式。 |
Input |
⮞
patternMessage
: string
|
string
|
字段不满足格式时的提示文案。 |
Input |
⮞
validateErrorMessage
: string
|
string
|
验证失败的提示文案。 |
Input |
⮞
validateStartMessage
: string
|
string
|
开始异步验证的提示文案。 |
Input |
⮞
validateStartMessagePrefix
: string
|
string
|
开始异步验证的提示文案前缀。 |
Input |
⮞
validateInfoMessagePrefix
: string
|
string
|
验证信息状态的提示文案前缀。 |
Input |
⮞
validateErrorMessagePrefix
: string
|
string
|
验证失败状态的提示文案前缀。 |
Input |
⮞
validateWarningMessagePrefix
: string
|
string
|
验证警告状态的提示文案前缀。 |
Input |
⮞
validateSuccessMessagePrefix
: string
|
string
|
验证成功状态的提示文案前缀。 |
Input |
⮞
willValidate
: boolean
|
boolean
|
(只读)判断当前输入域是否需要验证。 |
Input |
⮞
validateDelay
: number
|
number
|
验证事件触发后延时验证的毫秒数。 |
Input |
⮞
revalidateDelay
: number
|
number
|
重新验证事件触发后延时验证的毫秒数。 |
Input |
⮞
onValidate
: (value: any, sender: List) => ValidityResult
|
function
|
验证事件。 |
Input |
⮞
onReportValidity
: (validityResult: NormalizedValidityResult, sender: List) => boolean | void
|
function
|
报告验证结果事件。 |
Input |
⮞
validityToolTipOptions
: Partial<ToolTip>
|
Partial<ToolTip>
|
验证工具提示的选项。 |
Input |
⮞
readyState
: ControlState
|
ControlState
|
获取当前控件的渲染状态。 |
Control |
⮞
elem
: HTMLElement
|
HTMLElement
|
关联的元素。 |
Control |
⮞
vNode
: VNode
|
VNode
|
(保护的)获取当前控件关联的虚拟节点。 |
Control |
⮞
sourceVNode
: VNode
|
VNode
|
获取创建该控件使用的源虚拟节点。 |
Control |
⮞
alwaysUpdate
: boolean
|
boolean
|
控件是否使用主动更新模式。 |
Control |
⮞
duration
: number = 200
|
number
|
渐变的持续毫秒数。如果为 0 则不使用渐变。 |
Control |
⮞
class
: string
|
string
|
CSS 类名。 |
Control |
⮞
style
: string | { [key: string]: string | number; }
|
string | object
|
控件样式。 |
Control |
⮞
id
: string
|
string
|
控件序号。 |
Control |
⮞
content
: NodeLike
|
NodeLike
|
控件内容。 |
Control |
⮞
onSelectStart
: (e: Event, sender: List) => void
|
function
|
选择开始事件。 |
Control |
⮞
onClick
: (e: MouseEvent, sender: List) => void
|
function
|
点击事件。 |
Control |
⮞
onAuxClick
: (e: MouseEvent, sender: List) => void
|
function
|
中键点击事件。 |
Control |
⮞
onDblClick
: (e: MouseEvent, sender: List) => void
|
function
|
双击事件。 |
Control |
⮞
onContextMenu
: (e: PointerEvent, sender: List) => void
|
function
|
右键菜单事件。 |
Control |
⮞
onMouseDown
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标按下事件。 |
Control |
⮞
onMouseUp
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标按上事件。 |
Control |
⮞
onMouseOver
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标移入事件。 |
Control |
⮞
onMouseOut
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标移开事件。 |
Control |
⮞
onMouseEnter
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标进入事件。 |
Control |
⮞
onMouseLeave
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标离开事件。 |
Control |
⮞
onMouseMove
: (e: MouseEvent, sender: List) => void
|
function
|
鼠标移动事件。 |
Control |
⮞
onWheel
: (e: WheelEvent, sender: List) => void
|
function
|
鼠标滚轮事件。 |
Control |
⮞
onScroll
: (e: UIEvent, sender: List) => void
|
function
|
滚动事件。 |
Control |
⮞
onTouchStart
: (e: TouchEvent, sender: List) => void
|
function
|
触摸开始事件。 |
Control |
⮞
onTouchMove
: (e: TouchEvent, sender: List) => void
|
function
|
触摸移动事件。 |
Control |
⮞
onTouchEnd
: (e: TouchEvent, sender: List) => void
|
function
|
触摸结束事件。 |
Control |
⮞
onTouchCancel
: (e: TouchEvent, sender: List) => void
|
function
|
触摸撤销事件。 |
Control |
⮞
onPointerEnter
: (e: PointerEvent, sender: List) => void
|
function
|
指针进入事件。 |
Control |
⮞
onPointerLeave
: (e: PointerEvent, sender: List) => void
|
function
|
指针离开事件。 |
Control |
⮞
onPointerOver
: (e: PointerEvent, sender: List) => void
|
function
|
指针移入事件。 |
Control |
⮞
onPointerOut
: (e: PointerEvent, sender: List) => void
|
function
|
指针移开事件。 |
Control |
⮞
onPointerDown
: (e: PointerEvent, sender: List) => void
|
function
|
指针按下事件。 |
Control |
⮞
onPointerMove
: (e: PointerEvent, sender: List) => void
|
function
|
指针移动事件。 |
Control |
⮞
onPointerUp
: (e: PointerEvent, sender: List) => void
|
function
|
指针松开事件。 |
Control |
⮞
onPointerCancel
: (e: PointerEvent, sender: List) => void
|
function
|
指针取消事件。 |
Control |
⮞
onGotPointerCapture
: (e: PointerEvent, sender: List) => void
|
function
|
指针开始捕获事件。 |
Control |
⮞
onLostPointerCapture
: (e: PointerEvent, sender: List) => void
|
function
|
指针停止捕获事件。 |
Control |
方法 | 描述 | 继承自 | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
⮞
findItemByKey(key)(key:
|
获取指定键对应的项。 |
— | ||||||||
⮞
findItemByContent(content)(content:
|
获取指定内容对应的项。 |
— | ||||||||
⮞
render()():
|
(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。 |
Input |
||||||||
⮞
isHidden()():
|
判断输入域样式是否被隐藏。 |
Input |
||||||||
⮞
init()():
|
(保护的)当被子类重写时负责在关联元素后初始化当前控件。 |
Control |
||||||||
⮞
handleValidateEvent()():
|
(保护的)处理验证事件。 |
Input |
||||||||
⮞
checkValidity()():
验证当前输入域。 返回值类型: 返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
验证当前输入域。 |
Input |
||||||||
⮞
validate(value)(value:
(保护的)当被子类重写时负责验证指定的值。
返回值返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
(保护的)当被子类重写时负责验证指定的值。 |
Input |
||||||||
⮞
normlizeValidityResult(r)(r:
(保护的)规范化验证结果对象。
返回值类型: 继承自 |
(保护的)规范化验证结果对象。 |
Input |
||||||||
⮞
reportValidity()():
向用户报告验证结果。 返回值类型: 返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
向用户报告验证结果。 |
Input |
||||||||
⮞
setCustomValidity(validityResult)(validityResult:
设置自定义的验证消息。
返回值类型: 继承自 |
设置自定义的验证消息。 |
Input |
||||||||
⮞
createValidityToolTip()():
|
(保护的)当被子类重写时负责创建当前输入框的默认验证提示。 |
Input |
||||||||
⮞
reset()():
|
重置当前输入域。 |
Input |
||||||||
⮞
focus()():
|
令当前控件获得焦点。 |
Input |
||||||||
⮞
blur()():
|
令当前控件失去焦点。 |
Input |
||||||||
⮞
layout(changes)(changes:
|
重新布局当前控件。 |
Control |
||||||||
⮞
uninit()():
|
(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。 |
Control |
||||||||
⮞
update()():
|
重新渲染当前控件。 |
Control |
||||||||
⮞
invalidate()():
|
使当前控件无效并在下一帧重新渲染。 |
Control |
||||||||
⮞
renderTo(parent, ...)(parent:
|
将当前控件渲染到指定的父控件或节点。 |
Control |
||||||||
⮞
find(selector)(selector:
|
在当前控件查找指定的子控件或节点。 |
Control |
||||||||
⮞
query(selector)(selector:
|
在当前控件查找匹配的所有子控件或节点。 |
Control |
ListItem 类
继承自:Control
表示一个列表项。
字段 | 类型 | 描述 | 继承自 |
---|---|---|---|
⮞
key
: any
键。 |
any
|
键。 |
— |
⮞
selected
: boolean
是否选中。 |
boolean
|
是否选中。 |
— |
⮞
body
: HTMLElement
|
HTMLElement
|
(已覆盖)(只读)获取用于包含子控件和节点的根元素。 |
Control |
⮞
content
: string
|
string
|
(已覆盖)内容。 |
Control |
⮞
readyState
: ControlState
|
ControlState
|
获取当前控件的渲染状态。 |
Control |
⮞
elem
: HTMLElement
|
HTMLElement
|
关联的元素。 |
Control |
⮞
vNode
: VNode
|
VNode
|
(保护的)获取当前控件关联的虚拟节点。 |
Control |
⮞
sourceVNode
: VNode
|
VNode
|
获取创建该控件使用的源虚拟节点。 |
Control |
⮞
alwaysUpdate
: boolean
|
boolean
|
控件是否使用主动更新模式。 |
Control |
⮞
duration
: number = 200
|
number
|
渐变的持续毫秒数。如果为 0 则不使用渐变。 |
Control |
⮞
class
: string
|
string
|
CSS 类名。 |
Control |
⮞
style
: string | { [key: string]: string | number; }
|
string | object
|
控件样式。 |
Control |
⮞
id
: string
|
string
|
控件序号。 |
Control |
⮞
onSelectStart
: (e: Event, sender: ListItem) => void
|
function
|
选择开始事件。 |
Control |
⮞
onClick
: (e: MouseEvent, sender: ListItem) => void
|
function
|
点击事件。 |
Control |
⮞
onAuxClick
: (e: MouseEvent, sender: ListItem) => void
|
function
|
中键点击事件。 |
Control |
⮞
onDblClick
: (e: MouseEvent, sender: ListItem) => void
|
function
|
双击事件。 |
Control |
⮞
onContextMenu
: (e: PointerEvent, sender: ListItem) => void
|
function
|
右键菜单事件。 |
Control |
⮞
onMouseDown
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标按下事件。 |
Control |
⮞
onMouseUp
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标按上事件。 |
Control |
⮞
onMouseOver
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标移入事件。 |
Control |
⮞
onMouseOut
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标移开事件。 |
Control |
⮞
onMouseEnter
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标进入事件。 |
Control |
⮞
onMouseLeave
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标离开事件。 |
Control |
⮞
onMouseMove
: (e: MouseEvent, sender: ListItem) => void
|
function
|
鼠标移动事件。 |
Control |
⮞
onWheel
: (e: WheelEvent, sender: ListItem) => void
|
function
|
鼠标滚轮事件。 |
Control |
⮞
onScroll
: (e: UIEvent, sender: ListItem) => void
|
function
|
滚动事件。 |
Control |
⮞
onTouchStart
: (e: TouchEvent, sender: ListItem) => void
|
function
|
触摸开始事件。 |
Control |
⮞
onTouchMove
: (e: TouchEvent, sender: ListItem) => void
|
function
|
触摸移动事件。 |
Control |
⮞
onTouchEnd
: (e: TouchEvent, sender: ListItem) => void
|
function
|
触摸结束事件。 |
Control |
⮞
onTouchCancel
: (e: TouchEvent, sender: ListItem) => void
|
function
|
触摸撤销事件。 |
Control |
⮞
onPointerEnter
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针进入事件。 |
Control |
⮞
onPointerLeave
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针离开事件。 |
Control |
⮞
onPointerOver
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针移入事件。 |
Control |
⮞
onPointerOut
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针移开事件。 |
Control |
⮞
onPointerDown
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针按下事件。 |
Control |
⮞
onPointerMove
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针移动事件。 |
Control |
⮞
onPointerUp
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针松开事件。 |
Control |
⮞
onPointerCancel
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针取消事件。 |
Control |
⮞
onGotPointerCapture
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针开始捕获事件。 |
Control |
⮞
onLostPointerCapture
: (e: PointerEvent, sender: ListItem) => void
|
function
|
指针停止捕获事件。 |
Control |
方法 | 描述 | 继承自 |
---|---|---|
⮞
render()():
|
(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。 |
Control |
⮞
init()():
|
(保护的)当被子类重写时负责在关联元素后初始化当前控件。 |
Control |
⮞
uninit()():
|
(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。 |
Control |
⮞
update()():
|
重新渲染当前控件。 |
Control |
⮞
layout(changes)(changes:
|
重新布局当前控件。 |
Control |
⮞
invalidate()():
|
使当前控件无效并在下一帧重新渲染。 |
Control |
⮞
renderTo(parent, ...)(parent:
|
将当前控件渲染到指定的父控件或节点。 |
Control |
⮞
find(selector)(selector:
|
在当前控件查找指定的子控件或节点。 |
Control |
⮞
query(selector)(selector:
|
在当前控件查找匹配的所有子控件或节点。 |
Control |
ListBox 类
继承自:List
表示一个列表框。
字段 | 类型 | 描述 | 继承自 |
---|---|---|---|
⮞
onSelect
: (item: ListItem, e: UIEvent, sender: ListBox) => boolean | void
即将选中事件。 |
function
|
即将选中事件。 |
— |
⮞
keyMappings
: KeyPressOptions
(只读)获取键盘绑定。 |
KeyPressOptions
|
(只读)获取键盘绑定。 |
— |
⮞
value
: any
|
any
|
(已覆盖)值。 |
List |
⮞
readOnly
: boolean
|
boolean
|
(已覆盖)是否只读。 |
Input |
⮞
disabled
: boolean
|
boolean
|
(已覆盖)是否禁用。 |
Input |
⮞
body
: HTMLElement
|
HTMLElement
|
(已覆盖)(只读)获取用于包含子控件和节点的根元素。 |
Input |
⮞
items
: ListItem[]
|
ListItem[]
|
所有项。 |
List |
⮞
selectedItem
: ListItem
|
ListItem
|
选中的第一项。 |
List |
⮞
selectedIndex
: number
|
number
|
选中的第一项的索引。 |
List |
⮞
input
: HTMLInputElement
|
HTMLInputElement
|
(只读)内部关联的输入框元素。 |
Input |
⮞
name
: string
|
string
|
名字。 |
Input |
⮞
defaultValue
: any
|
any
|
默认值。 |
Input |
⮞
type
: string
|
string
|
输入框的类型。 |
Input |
⮞
placeholder
: string
|
string
|
未输入内容时的占位符。 |
Input |
⮞
tabIndex
: number
|
number
|
TAB 键切换顺序。 |
Input |
⮞
tabStop
: boolean
|
boolean
|
是否允许 TAB 键停靠。 |
Input |
⮞
onCopy
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
复制事件。 |
Input |
⮞
onCut
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
剪切事件。 |
Input |
⮞
onPaste
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
粘贴事件。 |
Input |
⮞
onBeforeCopy
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
即将复制事件。 |
Input |
⮞
onBeforeCut
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
即将剪切事件。 |
Input |
⮞
onBeforePaste
: (e: ClipboardEvent, sender: ListBox) => void
|
function
|
即将粘贴事件。 |
Input |
⮞
onFocus
: (e: FocusEvent, sender: ListBox) => void
|
function
|
获取焦点事件。 |
Input |
⮞
onBlur
: (e: FocusEvent, sender: ListBox) => void
|
function
|
失去焦点事件。 |
Input |
⮞
onFocusIn
: (e: FocusEvent, sender: ListBox) => void
|
function
|
当前元素和子元素获取焦点事件。 |
Input |
⮞
onFocusOut
: (e: FocusEvent, sender: ListBox) => void
|
function
|
当前元素和子元素失去焦点事件。 |
Input |
⮞
onInput
: (e: Event, sender: ListBox) => void
|
function
|
输入事件。 |
Input |
⮞
onChange
: (e: Event, sender: ListBox) => void
|
function
|
更改事件。 |
Input |
⮞
onKeyDown
: (e: KeyboardEvent, sender: ListBox) => void
|
function
|
键盘按下事件。 |
Input |
⮞
onKeyPress
: (e: KeyboardEvent, sender: ListBox) => void
|
function
|
键盘点击事件。 |
Input |
⮞
onKeyUp
: (e: KeyboardEvent, sender: ListBox) => void
|
function
|
键盘按上事件。 |
Input |
⮞
onEnter
: (e: KeyboardEvent, sender: ListBox) => void
|
function
|
回车事件。 |
Input |
⮞
status
: Status
|
Status
|
控件状态。 |
Input |
⮞
statusClassPrefix
: string
|
string
|
控件状态前缀。 |
Input |
⮞
hideSuccess
: boolean
|
boolean
|
是否隐藏验证成功状态。 |
Input |
⮞
noValidate
: boolean
|
boolean
|
是否禁用验证。 |
Input |
⮞
validateEvent
: string
|
string
|
触发验证的事件。 |
Input |
⮞
required
: boolean
|
boolean
|
字段是否必填。 |
Input |
⮞
requiredMessage
: string
|
string
|
字段不满足必填时的提示文案。 |
Input |
⮞
maxLength
: number
|
number
|
最大长度。-1 表示不限制。 |
Input |
⮞
maxLengthMessage
: string
|
string
|
字段不满足最大长度时的提示文案。 |
Input |
⮞
minLength
: number
|
number
|
最小长度。-1 表示不限制。 |
Input |
⮞
minLengthMessage
: string
|
string
|
字段不满足最小长度时的提示文案。 |
Input |
⮞
max
: any
|
any
|
最大值。 |
Input |
⮞
maxMessage
: string
|
string
|
字段不满足最大值时的提示文案。 |
Input |
⮞
min
: any
|
any
|
最小值。 |
Input |
⮞
minMessage
: string
|
string
|
字段不满足最小值时的提示文案。 |
Input |
⮞
pattern
: RegExp
|
RegExp
|
匹配格式的正则表达式。 |
Input |
⮞
patternMessage
: string
|
string
|
字段不满足格式时的提示文案。 |
Input |
⮞
validateErrorMessage
: string
|
string
|
验证失败的提示文案。 |
Input |
⮞
validateStartMessage
: string
|
string
|
开始异步验证的提示文案。 |
Input |
⮞
validateStartMessagePrefix
: string
|
string
|
开始异步验证的提示文案前缀。 |
Input |
⮞
validateInfoMessagePrefix
: string
|
string
|
验证信息状态的提示文案前缀。 |
Input |
⮞
validateErrorMessagePrefix
: string
|
string
|
验证失败状态的提示文案前缀。 |
Input |
⮞
validateWarningMessagePrefix
: string
|
string
|
验证警告状态的提示文案前缀。 |
Input |
⮞
validateSuccessMessagePrefix
: string
|
string
|
验证成功状态的提示文案前缀。 |
Input |
⮞
willValidate
: boolean
|
boolean
|
(只读)判断当前输入域是否需要验证。 |
Input |
⮞
validateDelay
: number
|
number
|
验证事件触发后延时验证的毫秒数。 |
Input |
⮞
revalidateDelay
: number
|
number
|
重新验证事件触发后延时验证的毫秒数。 |
Input |
⮞
onValidate
: (value: any, sender: ListBox) => ValidityResult
|
function
|
验证事件。 |
Input |
⮞
onReportValidity
: (validityResult: NormalizedValidityResult, sender: ListBox) => boolean | void
|
function
|
报告验证结果事件。 |
Input |
⮞
validityToolTipOptions
: Partial<ToolTip>
|
Partial<ToolTip>
|
验证工具提示的选项。 |
Input |
⮞
readyState
: ControlState
|
ControlState
|
获取当前控件的渲染状态。 |
Control |
⮞
elem
: HTMLElement
|
HTMLElement
|
关联的元素。 |
Control |
⮞
vNode
: VNode
|
VNode
|
(保护的)获取当前控件关联的虚拟节点。 |
Control |
⮞
sourceVNode
: VNode
|
VNode
|
获取创建该控件使用的源虚拟节点。 |
Control |
⮞
alwaysUpdate
: boolean
|
boolean
|
控件是否使用主动更新模式。 |
Control |
⮞
duration
: number = 200
|
number
|
渐变的持续毫秒数。如果为 0 则不使用渐变。 |
Control |
⮞
class
: string
|
string
|
CSS 类名。 |
Control |
⮞
style
: string | { [key: string]: string | number; }
|
string | object
|
控件样式。 |
Control |
⮞
id
: string
|
string
|
控件序号。 |
Control |
⮞
content
: NodeLike
|
NodeLike
|
控件内容。 |
Control |
⮞
onSelectStart
: (e: Event, sender: ListBox) => void
|
function
|
选择开始事件。 |
Control |
⮞
onClick
: (e: MouseEvent, sender: ListBox) => void
|
function
|
点击事件。 |
Control |
⮞
onAuxClick
: (e: MouseEvent, sender: ListBox) => void
|
function
|
中键点击事件。 |
Control |
⮞
onDblClick
: (e: MouseEvent, sender: ListBox) => void
|
function
|
双击事件。 |
Control |
⮞
onContextMenu
: (e: PointerEvent, sender: ListBox) => void
|
function
|
右键菜单事件。 |
Control |
⮞
onMouseDown
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标按下事件。 |
Control |
⮞
onMouseUp
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标按上事件。 |
Control |
⮞
onMouseOver
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标移入事件。 |
Control |
⮞
onMouseOut
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标移开事件。 |
Control |
⮞
onMouseEnter
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标进入事件。 |
Control |
⮞
onMouseLeave
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标离开事件。 |
Control |
⮞
onMouseMove
: (e: MouseEvent, sender: ListBox) => void
|
function
|
鼠标移动事件。 |
Control |
⮞
onWheel
: (e: WheelEvent, sender: ListBox) => void
|
function
|
鼠标滚轮事件。 |
Control |
⮞
onScroll
: (e: UIEvent, sender: ListBox) => void
|
function
|
滚动事件。 |
Control |
⮞
onTouchStart
: (e: TouchEvent, sender: ListBox) => void
|
function
|
触摸开始事件。 |
Control |
⮞
onTouchMove
: (e: TouchEvent, sender: ListBox) => void
|
function
|
触摸移动事件。 |
Control |
⮞
onTouchEnd
: (e: TouchEvent, sender: ListBox) => void
|
function
|
触摸结束事件。 |
Control |
⮞
onTouchCancel
: (e: TouchEvent, sender: ListBox) => void
|
function
|
触摸撤销事件。 |
Control |
⮞
onPointerEnter
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针进入事件。 |
Control |
⮞
onPointerLeave
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针离开事件。 |
Control |
⮞
onPointerOver
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针移入事件。 |
Control |
⮞
onPointerOut
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针移开事件。 |
Control |
⮞
onPointerDown
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针按下事件。 |
Control |
⮞
onPointerMove
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针移动事件。 |
Control |
⮞
onPointerUp
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针松开事件。 |
Control |
⮞
onPointerCancel
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针取消事件。 |
Control |
⮞
onGotPointerCapture
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针开始捕获事件。 |
Control |
⮞
onLostPointerCapture
: (e: PointerEvent, sender: ListBox) => void
|
function
|
指针停止捕获事件。 |
Control |
方法 | 描述 | 继承自 | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
⮞
handleItemClick(e, item)(e:
(保护的)处理项点击事件。
返回值类型: |
(保护的)处理项点击事件。 |
— | ||||||||||||
⮞
select(item, ...)(item:
|
选中项。 |
— | ||||||||||||
⮞
init()():
|
(保护的)(已覆盖)当被子类重写时负责在关联元素后初始化当前控件。 |
List |
||||||||||||
⮞
render()():
|
(保护的)当被子类重写时负责返回当前控件的虚拟节点。 |
Control |
||||||||||||
⮞
findItemByKey(key)(key:
|
获取指定键对应的项。 |
List |
||||||||||||
⮞
findItemByContent(content)(content:
|
获取指定内容对应的项。 |
List |
||||||||||||
⮞
isHidden()():
|
判断输入域样式是否被隐藏。 |
Input |
||||||||||||
⮞
handleValidateEvent()():
|
(保护的)处理验证事件。 |
Input |
||||||||||||
⮞
checkValidity()():
验证当前输入域。 返回值类型: 返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
验证当前输入域。 |
Input |
||||||||||||
⮞
validate(value)(value:
(保护的)当被子类重写时负责验证指定的值。
返回值返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
(保护的)当被子类重写时负责验证指定的值。 |
Input |
||||||||||||
⮞
normlizeValidityResult(r)(r:
(保护的)规范化验证结果对象。
返回值类型: 继承自 |
(保护的)规范化验证结果对象。 |
Input |
||||||||||||
⮞
reportValidity()():
向用户报告验证结果。 返回值类型: 返回验证结果。如果正在执行异步验证则返回一个确认对象。 继承自 |
向用户报告验证结果。 |
Input |
||||||||||||
⮞
setCustomValidity(validityResult)(validityResult:
设置自定义的验证消息。
返回值类型: 继承自 |
设置自定义的验证消息。 |
Input |
||||||||||||
⮞
createValidityToolTip()():
|
(保护的)当被子类重写时负责创建当前输入框的默认验证提示。 |
Input |
||||||||||||
⮞
reset()():
|
重置当前输入域。 |
Input |
||||||||||||
⮞
focus()():
|
令当前控件获得焦点。 |
Input |
||||||||||||
⮞
blur()():
|
令当前控件失去焦点。 |
Input |
||||||||||||
⮞
layout(changes)(changes:
|
重新布局当前控件。 |
Control |
||||||||||||
⮞
uninit()():
|
(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。 |
Control |
||||||||||||
⮞
update()():
|
重新渲染当前控件。 |
Control |
||||||||||||
⮞
invalidate()():
|
使当前控件无效并在下一帧重新渲染。 |
Control |
||||||||||||
⮞
renderTo(parent, ...)(parent:
|
将当前控件渲染到指定的父控件或节点。 |
Control |
||||||||||||
⮞
find(selector)(selector:
|
在当前控件查找指定的子控件或节点。 |
Control |
||||||||||||
⮞
query(selector)(selector:
|
在当前控件查找匹配的所有子控件或节点。 |
Control |