组件/表单组件

EAutocomplete 自动补全

import EUI 1.0

示例与代码

自动补全

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EAutocomplete { debounce: 250 highlightFirstItem: true fetchSuggestions: function(query, done) { done(["Qt", "QML", "Qt Quick", "Qt Creator"].filter(function(text) { return text.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义建议、加载与循环导航

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width EAutocomplete { id: webUploadAutocomplete width: Math.min(420, parent.width) debounce: 120 showArrow: true highlightFirstItem: true textRole: "name" placeholderText: qsTr("搜索城市，使用方向键选择") fetchSuggestions: function(query, callback) { const cities = [{name: "Shanghai", country: "China"}, {name: "Singapore", country: "Singapore"}, {name: "Seattle", country: "USA"}] Qt.callLater(function() { callback(cities.filter(function(city) { return city.name.toLowerCase().indexOf(query.toLowerCase()) >= 0 })) }) } optionDelegate: Component { EText { property var option property int optionIndex: -1 text: option ? option.name + " · " + option.country : "" } } headerDelegate: Component { EText { text: qsTr("城市建议") leftPadding: 20 } } footerDelegate: Component { EText { leftPadding: 20 text: qsTr("↑ ↓ 循环浏览，Enter 选择") } } loadingDelegate: Component { EText { horizontalAlignment: Text.AlignHCenter text: qsTr("正在搜索城市…") } } } EText { text: qsTr("当前内容：") + webUploadAutocomplete.text } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

输入建议

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EAutocomplete { clearable: true model: ["QML", "Qt Quick", "Qt Widgets"] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

accessibleNamestring

辅助技术读取的名称；建议为无文字控件设置可读名称。

默认值placeholderText

appendComponentComponent

自定义输入附加区或列表尾部的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

clearIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值EIcons.CIRCLE_XMARK

clearablebool

显示清除操作；评分中允许再次点击当前分数清零。

默认值false

debounceint

等待、节流或自动关闭时间，单位为毫秒；0 表示不延迟或不启用定时关闭。

默认值300

echoModeenum

输入内容的显示模式。

TextInput.Normal
TextInput.Password
TextInput.NoEcho
TextInput.PasswordEchoOnEdit

默认值动态绑定

enabledbool

是否允许交互；false 时控件禁用。

默认值true

fetchSuggestionsvar

建议查询回调 (query, callback)，可调用 callback、返回数组或 Promise。

默认值null

fitInputWidthbool

建议弹层宽度跟随输入框。

默认值true

fontfont

字体配置，控制字体、字号及文字样式。

常用字段：
family、pixelSize、pointSize
bold、italic、weight
underline、strikeout
letterSpacing、wordSpacing

默认值应用字体

footerDelegateComponent

自定义底部内容的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

formattervar

格式化回调，把当前值转换为显示文字。

默认值null

headerDelegateComponent

自定义头部内容或表头的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

hideLoadingbool

隐藏建议列表加载提示。

默认值false

highlightFirstItembool

建议列表显示时高亮第一项。

默认值false

loadingbool

是否处于加载状态。

默认值false

loadingDelegateComponent

自定义加载状态的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

loopNavigationbool

键盘上下导航首尾循环。

默认值true

maximumLengthint

最多允许输入的字符数。

默认值32767

modelvar

组件的数据源；数组项结构以当前示例及组件说明为准。

默认值[]

offsetint

相对布局、滚动目标或弹层参考对象的偏移；单位为像素。

默认值6

optionDelegateComponent

自定义选项的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

parservar

输入解析函数，把显示文字转换为底层值。

默认值null

passwordVisiblebool

密码是否以明文显示。

默认值false

placeholderTextstring

空值时显示的占位文字。

默认值""

placementstring

建议列表相对于输入框的位置。

"top" / "top-start"
"top-end" / "bottom"
"bottom-start" / "bottom-end"

默认值"bottom-start"

popupMaxHeightint

建议弹层最大高度，单位为像素。

默认值240

popupWidthint

弹层或菜单宽度，单位为像素；0 时使用自动宽度。

默认值0

prefixComponentComponent

自定义前缀的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

prefixIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

prependComponentComponent

自定义输入前置区的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

readOnlybool

禁止用户编辑或评分，仍可通过属性设置值。

默认值false

selectWhenUnmatchedbool

没有匹配建议时允许提交输入文字。

默认值false

showArrowbool

是否显示弹层或引导箭头。

默认值false

showPasswordbool

启用密码输入及密码显示切换。

默认值false

showWordLimitbool

显示当前字数与长度上限。

默认值false

sizeint

控件尺寸；默认继承最近的 EConfigProvider。

EStyle.Small
EStyle.Medium
EStyle.Large

默认值继承 Provider，默认 EStyle.Medium

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Primary

suffixComponentComponent

自定义后缀的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

suffixIconint

组件使用的图标。

EIcons.*
0（无图标）

默认值0

textstring

显示的文字内容。

默认值""

textColorcolor

文字颜色。

默认值动态绑定

textRolestring

数据对象中用于文字、取值、子节点或缩进的字段名。

默认值"label"

triggerOnFocusbool

聚焦输入框时查询并显示建议。

默认值true

validateEventbool

值变化时是否向所属表单派发校验请求。

默认值true

validationMessagestring

校验结果说明或外部错误文字。

默认值""

validationStateint

输入校验状态。

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

默认值EValidationState.None

valueKeyalias

选项取值字段或对象值的唯一标识字段。

默认值别名：control.textRole

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth

activatedbool只读

建议输入的弹层是否处于激活状态。

默认值由运行时计算

hasValidationErrorbool只读

当前校验状态是否为 Error。

默认值由运行时计算

highlightedIndexint只读

建议列表当前键盘高亮项索引。

默认值由运行时计算

inputRefvar只读

内部输入控件的引用，供读取输入状态或操作焦点。

默认值由运行时计算

popperRefvar只读

内部菜单、弹层或提示对象引用。

默认值由运行时计算

sourceItemsvar只读

经过数据规范化处理的建议或选择项列表。

默认值由运行时计算

suggestionsvar只读

当前建议查询返回的项目列表。

默认值由运行时计算

wordCountint只读

当前输入字符数量。

默认值由运行时计算

showPasswordStrengthbool

聚焦密码输入时显示强度与规则检查。

默认值false

passwordRulesvar

密码规则数组；每项包含 label 及 minLength 或 pattern。

默认值

展开默认值

[ {label: ELocale.texts.PasswordLength, minLength: 8}, {label: ELocale.texts.PasswordUppercase, pattern: /[A-Z]/}, {label: ELocale.texts.PasswordLowercase, pattern: /[a-z]/}, {label: ELocale.texts.PasswordNumber, pattern: /[0-9]/}, {label: ELocale.texts.PasswordSymbol, pattern: /[^A-Za-z0-9]/} ]

passwordStrengthreal只读

通过规则的比例，范围为 0 到 1。

默认值

展开默认值

passwordRequirements.length ? passwordRequirements.filter(function(rule) { return rule.passed }).length / passwordRequirements.length : 0

passwordRequirementsvar只读

包含 label 与 passed 的规则检查结果。

默认值

展开默认值

Array.isArray(passwordRules) ? passwordRules.map(function(rule) { let passed = false try { if (rule && rule.minLength !== undefined) passed = text.length >= Number(rule.minLength) else if (rule && rule.pattern) { const expression = new RegExp(rule.pattern) passed = expression.test(text) } } catch (error) { passed = false } return {label: rule && rule.label ? String(rule.label) : "", passed: passed} }) : []

信号

签名作用

cleared()

使用清空操作清除内容后触发。

formatFailed(string message)

输入格式化失败时触发，message 为失败原因。

selected(var value)

选中建议项时触发，value 为所选建议值。

searchFailed(string message)

查询候选项失败时触发，message 为失败原因。

方法

签名作用

blur()

移除输入框焦点。

close()

关闭组件的面板或弹窗。

open()

打开组件的面板或弹窗。

getData(query)

使用 query 请求自动完成建议。

choose(index)

选中 index 对应的候选项。

highlight(index)

将 index 对应的候选项设为当前高亮项。

fetch(query)

使用 query 重新获取自动完成建议。