组件/数据展示引入于 1.3.0

EInplace 原位编辑

import EUI 1.0

示例与代码

点击编辑

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInplace { width: 320 text: qsTr("点击编辑") EInput { text: qsTr("可编辑内容") } }

效果

运行代码，体验组件交互

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

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

关闭编辑器

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInplace { width: 320 closable: true text: qsTr("点击编辑") EInput { text: qsTr("可编辑内容") } }

效果

运行代码，体验组件交互

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

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

默认编辑

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInplace { width: 320 active: true text: qsTr("点击编辑") EInput { text: qsTr("可编辑内容") } }

效果

运行代码，体验组件交互

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

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

自定义展示

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInplace { width: 320 text: qsTr("点击编辑") displayComponent: ETag { text: "Edit account" iconSource: EIcons.PENCIL } EInput { text: qsTr("可编辑内容") } }

效果

运行代码，体验组件交互

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

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

禁用编辑

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInplace { width: 320 enabled: false text: qsTr("点击编辑") EInput { text: qsTr("可编辑内容") } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

editoralias

进入编辑状态后创建的编辑器 Component。

默认值editorLoader.sourceComponent

textstring

显示的文字内容。

默认值""

activebool

是否正在显示编辑内容。

默认值false

closablebool

显示退出编辑状态的关闭按钮。

默认值true

displayComponentComponent

原位编辑器未打开时的展示内容。

默认值null

itemalias只读

当前已加载的内容实例，未加载时为 null。

默认值editorLoader.item

信号

签名作用

closed()

组件关闭后触发。

opened()

组件打开后触发。

方法

签名作用

close()

关闭组件的面板或弹窗。

open()

打开组件的面板或弹窗。