弹出编辑

QPopupEdit组件可用于“就地”编辑值,例如QTable中的单元格。 默认情况下,单元格显示为字符串,然后,如果您使用的是QPopupEdit,并且用户单击/轻击表格单元格,则会打开一个弹出窗口,用户可以在其中使用文本字段编辑值。

此组件将QMenu注入其父DOM元素,并启用上述行为,因此可以在任何地方使用它,不仅可以在QTable中使用。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

如果在QTable上使用,则QPopupEdit不适用于单元格范围的插槽。

基础

单击单元格以查看弹出编辑器。 “name”列演示了title属性。 “carbs”列还演示了disable属性。 如果您查看源代码,则会看到“carbs”的单元格正在使用QPopupEdit,但是单击该单元格时,不会显示弹出窗口。

TIP

还有一个title插槽,您可以使用它插入自己的标题,如“calcium”列所示。

Simple edit, with title prop and slot

自定义

Custom style

持久且带有按钮

您还可以使用buttons属性添加两个按钮:“Cancel"和"Set”(默认标签)。 这些按钮有助于控制用户的输入。 除了buttons属性之外,您还拥有persistent属性,该属性拒绝用户使用退出键关闭弹出窗口或在弹出窗口外部单击/轻击。 persistent属性在“carbs”栏中显示。 最后,您可以使用label-setlabel-cancel属性来控制两个按钮的标签,如“Protein”列中所示。 注意,“Save"代替"Set”,而"Close"代替"Cancel"。

Persistent edit, and with buttons

默认作用域插槽

如果您希望完全自定义QPopupEdit内容,则还可以使用带参数的默认作用域插槽(与本页面上使用不带任何参数的默认作用域插槽的所有其他示例相反):

Default scoped slot parameters

Textarea / QEditor

由于QPopupEdit包裹了QInput,因此您基本上可以使用任何类型的QInput。 例如,您还可以使用下面的“Comments”列中所示的文本区域。

TIP

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

QInput textarea
QEditor

验证方式

QPopupEdit还允许对输入进行简单验证。 要使用它,您需要以箭头函数的形式为其提供回调函数,并且该函数应返回布尔值。 (value) => Boolean。 在下面的 “Protein”列中展示

提示1

注意,我们正在使用hide事件来重新验证输入。 如果我们不这样做,则QInput的error属性将“挂起”, 处于无效状态。

提示2

在此示例中,我们正在使用QInput的外部错误处理。 我们还可以使用QInput的validation属性并将值发送给QPopupEdit的validation属性。当也使用Vuelidate时,可以实现相同的概念。 换句话说,赋予QPopupEdit的validate函数的值可以来自任何地方。

Edit with validation

QTable之外的示例

Click on text

QPopupEdit API

Loading API...
Please wait...