组件/数据展示引入于 1.3.0

ECompare 对比

import EUI 1.0

示例与代码

拖动对比

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { value: 50 height: 220 width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

效果

运行代码，体验组件交互

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

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

悬停对比

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 hover: true width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

效果

运行代码，体验组件交互

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

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

纵向对比

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 vertical: true width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

效果

运行代码，体验组件交互

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

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

自定义滑块

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" handleComponent: EText { text: "◆" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } }

效果

运行代码，体验组件交互

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

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

键盘与边界

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { value: 0 height: 220 width: Math.min(540, parent.width) Accessible.description: "Arrow keys, Home, End" beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

valuereal

前层内容显示的百分比，范围为 0 到 100。

默认值50

hoverbool

随鼠标悬停位置更新对比比例。

默认值false

afterSourceurl

对比后层的图片地址。

默认值""

beforeSourceurl

对比前层的图片地址。

默认值""

verticalbool

使用上下方向的分隔与揭示效果。

默认值false

afterComponentComponent

替代后层图片的自定义内容。

默认值null

beforeComponentComponent

替代前层图片的自定义内容。

默认值null

handleComponentComponent

对比滑块的自定义内容。

默认值null

fractionreal只读

限制在 0 到 1 的对比比例。

默认值isFinite(value) ? Math.max(0, Math.min(100, value)) / 100 : 0.5

信号

签名作用

moved(real value)

用户调整对比位置时触发，value 为当前对比位置。

方法

签名作用

setValue(next)

设置新的数值，并应用组件的取值范围限制。