为什么捐赠
API 浏览器
联系站长
弹出编辑

QPopupEdit 组件可以用于"就地"编辑值,例如在 QTable 的单元格中。默认情况下,单元格显示为字符串,如果您使用 QPopupEdit,当用户点击/触摸表格单元格时,将弹出一个编辑框,用户可以使用文本字段编辑值。

这个组件会将一个 QMenu 注入到它的父 DOM 元素中来实现上述的行为,所以它可以被用在任何地方,而不仅仅是在 QTable 中。

正在加载 QPopupEdit API...

用法

WARNING

如果在 QTable 中使用,QPopupEdit 不能与单元格作用域插槽一起使用。

独立使用

点击文本



搭配 QTable

点击单元格查看弹出编辑器。"Name"列展示了 title 属性。"Calories"列展示了数值的使用。"Fat"列也展示了 disable 属性。如果您查看源代码,您会看到"fat"单元格使用了 QPopupEdit,但点击单元格时,弹出框不会显示。

编辑第一列



自定义

自定义 QPopupEdit



持久化和按钮

您还可以使用 buttons 属性添加两个按钮,“Cancel"和"Set”(默认标签)。这些按钮帮助控制用户的输入。与 buttons 属性一起,您还可以使用 persistent 属性,它会阻止用户通过 ESC 键或点击/触摸弹出框外部来关闭弹出框。最后,您可以使用 label-setlabel-cancel 属性来控制两个按钮的标签,如"Protein"列所示。注意"Save"替换了"Set",“Close"替换了"Cancel”。

persistent 属性在"carbs"列中展示。

持久化编辑和按钮



默认插槽

默认插槽的参数如下:

{
  (initialValue, value, validate, set, cancel, updatePosition);
}

WARNING

不要解构插槽的参数,因为当直接使用 value 属性与 v-model 一起使用时,会产生 linting 错误。

默认插槽参数



文本域 / QEditor

由于 QPopupEdit 包装了 QInput,您基本上可以使用任何类型的 QInput。例如,您也可以使用文本域,如下面的"Comments"列所示。

TIP

当使用多行控件(文本域、QEditor)进行输入时,您需要在组件上使用 @keyup.enter.stop 来阻止回车键关闭弹出框。您还需要添加按钮来控制弹出框。

QInput 文本域



QEditor



验证

QPopupEdit 还允许对输入进行简单的验证。要使用它,您需要提供一个箭头函数形式的回调函数,它应该返回一个布尔值。(value) => Boolean。这在下面的"Calories"列中展示

提示 1

注意我们使用 hide 事件来重新验证输入。如果不这样做,QInput 的 error 属性将"卡"在无效状态。

提示 2

在这个示例中,我们使用 QInput 的外部错误处理。我们也可以使用 QInput 的 validation 属性并将值发送到 QPopupEdit 的 validation 属性。使用 Regle 等外部验证库时也可以实现相同的概念。换句话说,提供给 QPopupEdit 的 validate 函数的值可以来自任何地方。

带验证的编辑