QPopupEdit 组件可用于“就地”编辑值，例如 QTable 中的单元格。默认情况下，单元格显示为字符串，如果你使用 QPopupEdit，并且用户点击/轻触表格单元格，则会打开一个弹出窗口，用户可以使用文本字段编辑值。
¥The QPopupEdit component can be used to edit a value “in place”, like for example a cell in QTable. By default, a cell is displayed as a String, then if you are using QPopupEdit and a user clicks/taps on the table cell, a popup will open where the user will be able to edit the value using a textfield.
此组件将 QMenu 注入其父 DOM 元素并启用上述行为，因此它可以在任何地方使用，而不仅仅是在 QTable 中。
¥This component injects a QMenu into its parent DOM element and enables the behavior described above, so it can be used anywhere, not only in QTable.
用法(Usage)
¥Usage
警告
如果在 QTable 上使用，QPopupEdit 将无法与单元格范围的插槽配合使用。
¥If used on a QTable, QPopupEdit won’t work with cell scoped slots.
独立式(Standalone)
¥Standalone
使用 QTable(With QTable)
¥With QTable
点击单元格查看弹出编辑器。“名称” 列演示了 title 属性。“卡路里” 列显示数值用法。“臃肿” 列还演示了 disable 属性。如果你查看源代码，你会发现 “fat” 的单元格正在使用 QPopupEdit，但点击该单元格时，弹出窗口不会显示。
¥Click on the cells to see the popup editor. The column “Name” demonstrates the title prop. The column “Calories” displays a numeric value usage. The column “Fat” also demonstrates the disable prop. If you look at the source code, you’ll see the cell for “fat” is using QPopupEdit, yet when clicking on the cell, the popup doesn’t show.
自定义(Customizing)
¥Customizing
持久化并带有按钮(Persistent and with buttons)
¥Persistent and with buttons
你还可以使用 buttons 属性添加两个按钮：“取消” 和 “设置”（默认标签）。这些按钮有助于控制用户的输入。除了 buttons 属性外，你还有 persistent 属性，它禁止用户使用退出键关闭弹出窗口或在弹出窗口外部点击/轻触。最后，你可以使用 label-set 和 label-cancel prop 控制两个按钮的标签，如 “Protein” 列所示。请注意 “保存” 正在替换 “设置”，而 “关闭” 正在替换 “取消”。
¥You can also add two buttons with the buttons prop, “Cancel” and “Set” (the default labels). These buttons help to control the user’s input. Along with the buttons prop, you also have the persistent prop, which denies the user from closing the popup with the escape key or clicking/ tapping outside of the popup. Lastly, you can control the labels of the two buttons with the label-set and label-cancel props, as seen in the “Protein” column. Notice “Save” is replacing “Set” and “Close” is replacing “Cancel”.
persistent属性在 “carbs” 列中进行了演示。¥The
persistentprop is demonstrated in the “carbs” column.
默认插槽(The default slot)
¥The default slot
默认插槽的参数为：
¥The default slot’s parameters are:
{ initialValue, value, validate, set, cancel, updatePosition }警告
不要解构插槽的参数，因为直接在 v-model 中使用 value 属性时会产生 linting 错误。
¥Do not destructure the slot’s parameters as it will generate linting errors when using the value prop directly with v-model.
文本区域 / QEditor(Textarea / QEditor)
¥Textarea / QEditor
由于 QPopupEdit 封装了 QInput，因此你基本上可以使用任何类型的 QInput。例如，你还可以使用如下所示的 “注释” 列中的文本区域。
¥Since QPopupEdit wraps QInput, you can basically use any type of QInput. For instance, you can also use a text area as shown below in the “Comments” column.
提示
使用多行控件（文本区域、QEditor）进行输入时，还需要在组件上使用 @keyup.enter.stop 属性，以防止按 Enter 键关闭弹出窗口。你还需要添加用于控制弹出窗口的按钮。
¥When using a multi-line control (textarea, QEditor) for input, you’ll need to also use @keyup.enter.stop on the component in order to stop the enter key from closing the popup. You’ll also need to add buttons for controlling the popup too.
验证(Validation)
¥Validation
QPopupEdit 还允许对输入进行简单的验证。要使用它，你需要以箭头函数的形式为其提供一个回调函数，该函数应返回布尔值。(value) => Boolean。这在下面的 “卡路里” 列中进行了演示。
¥QPopupEdit also allows for simple validation of the input. To use it, you give it a callback function in the form of an arrow function and it should return a Boolean. (value) => Boolean. This is demonstrated in the “Calories” column below.
提示 1
注意我们也使用 hide 事件来重新验证输入。如果不这样做，QInput 的 error 属性将使 ‘hang’ 处于无效状态。
¥Notice we are using the hide event to also revalidate the input. If we don’t, QInput’s error prop will ‘hang’ in an invalid state.
提示 2
在此示例中，我们使用 QInput 的外部错误处理。我们还可以使用 QInput 的 validation prop，并将值发送给 QPopupEdit 的 validation prop。使用 Regle 外部验证库时也可以实现相同的概念。换句话说，赋予 QPopupEdit 的验证函数的值可以来自任何地方。
¥With this example, we are using QInput’s external error handling. We could also use QInput’s validation prop and emit the value to QPopupEdit’s validation prop. The same concept can be implemented, when using Regle external validation library too. In other words, the value given to QPopupEdit’s validate function can come from anywhere.