Diff 对比

前后对比滑块组件，具有像素风格的独特功能。在其标志性模式下，"之前" 侧显示原始图片，而 "之后" 侧自动将其像素化 —— 创造交互式的原图与像素化效果对比。支持自定义插槽以比较任意两段内容。

灵感来源：daisyUI Diff，并结合了本库内置的像素化引擎进行增强。

?

名称	分类	说明	类型	默认值
pixelSize	? 风格	像素块大小（值越大越像素化）	number	8
grayscale	? 风格	启用灰度模式（仅对像素化侧生效）	boolean	false
width	? 尺寸	容器宽度	number | string	—
height	? 尺寸	容器高度	number | string	—
palette	? 颜色	自定义调色板（十六进制字符串或 RGB 元组）	string[] | number[][]	—
background	? 颜色	透明区域的背景色	string	'#FFFFFF'
color	? 颜色	滑块手柄主题色（primary / success / warning / info / danger）	string	—
initialPosition	? 行为	滑块初始位置（0-100）	number	50
src	? 内容	图片源地址（使用时 before 显示原图，after 显示像素化版本）	string	—
change	? 事件	滑块位置变化时触发	(position: number) => void	—
rendered	? 事件	像素化渲染完成后触发	() => void	—
error	? 事件	图片加载失败时触发	(event: Event) => void	—
before	? 插槽	自定义 "之前" 面板内容（左侧）		—
after	? 插槽	自定义 "之后" 面板内容（右侧）		—
setPosition(n)	? 方法	设置滑块位置（0-100）	(position: number) => void	—
getPosition()	? 方法	获取当前滑块位置	() => number	—

基础用法

传入 src 即可对比图片与其像素化版本。拖动滑块可显示更多或更少的原始图片。

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff src="/images/pixelate/001.png" :width="500" :height="300" />
  </div>
</template>

自定义插槽

使用 before 和 after 插槽来对比任意两段内容 —— 不同的图片、文本或组件。

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff :width="500" :height="300" color="primary">
      <template #before>
        <img src="/images/pixelate/001.png" style="width: 100%; height: 100%; object-fit: cover" />
      </template>
      <template #after>
        <img src="/images/pixelate/002.jpg" style="width: 100%; height: 100%; object-fit: cover" />
      </template>
    </px-diff>
  </div>
</template>

灰度模式

将 grayscale 与像素化模式结合使用，为 "之后" 侧呈现复古单色效果。

<template>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 16px">
    <px-diff
      src="/images/pixelate/002.jpg"
      :width="500"
      :height="300"
      :pixel-size="6"
      grayscale
      color="info"
    />
  </div>
</template>