更新记录

1.0.0（2026-07-07）

v1.0.0

初始化组件

平台兼容性

uni-app x(4.74)

dyl-img-compare 组件使用文档

dyl-img-compare 是一个图片前后对比组件，适合用于效果对比、修图前后展示、方案切换预览等场景。

组件默认展示一张底图和一张覆盖图，用户可以通过左右拖动中间分割线来查看两张图片的差异。

功能说明

• 支持前后两张图片的拖拽对比
• 支持自定义“处理前 / 处理后”提示文案
• 支持控制是否显示顶部提示标签
• 默认初始位置在组件宽度的中间

属性说明

基础用法

<template>
    <view class="page">
        <dyl-img-compare
            beforeImg="/static/demo/before.jpg"
            afterImg="/static/demo/after.jpg"
            beforeText="优化前"
            afterText="优化后"
        />
    </view>
</template>

不显示提示文案

<template>
    <dyl-img-compare
        beforeImg="/static/demo/before.jpg"
        afterImg="/static/demo/after.jpg"
        :showTips="false"
    />
</template>

使用说明

• 组件依赖图片正常加载后进行视觉对比，建议传入可直接访问的本地或网络图片地址
• 组件宽度跟随父容器，建议在外层为组件提供明确的展示宽度
• 当前拖拽通过触摸事件控制，适合移动端图片对比场景
• 组件初始化时会自动测量容器宽度，并将分割线定位到中间

示例建议

适合用于以下场景：

• AI 修图前后对比
• 滤镜效果对比
• 设计稿改版前后展示
• 地图、皮肤、海报等视觉差异预览

注意事项

• 请确保 beforeImg 和 afterImg 的内容尺寸和比例尽量一致，否则对比时可能出现错位视觉
• 如果外层容器初始不可见，组件首次测量宽度可能不准确，建议在容器显示后再渲染组件或重新触发测量
• 当前组件未对图片加载失败状态做兜底展示，业务侧如有需要可在外层补充占位逻辑