图片对比
使用滑块并排比较两张图片。
导入 #
import ImageCompare from 'primevue/imagecompare';
基础 #
图片使用带有 left 和 right 插槽的模板定义。使用 style 或 class 属性来定义容器的大小。
<ImageCompare class="shadow-lg rounded-2xl">
<template #left>
<img src="~/assets/images/island1.jpg" />
</template>
<template #right>
<img src="~/assets/images/island2.jpg" />
</template>
</ImageCompare>
响应式 #
将响应式样式应用于容器元素，以优化每个屏幕尺寸的显示。
<ImageCompare class="sm:!w-96 shadow-lg rounded-2xl">
<template #left>
<img src="~/assets/images/island1.jpg" />
</template>
<template #right>
<img src="~/assets/images/island2.jpg" />
</template>
</ImageCompare>
可访问性 #
屏幕阅读器
ImageComponent 组件内部使用原生范围滑块。可以使用 aria-labelledby 和 aria-label 属性定义描述组件的值。
<span id="image_label">Compare Images</span>
<ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
...
</ImageCompare>
<ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
...
</ImageCompare>
键盘支持
| 按键 | 功能 |
|---|---|
| tab | 将焦点移动到组件。 |
| 左箭头上箭头 | 减少值。 |
| 右箭头下箭头 | 增加值。 |
| home | 设置最小值。 |
| end | 设置最大值。 |
| page up | 将值增加 10 个步长。 |
| page down | 将值减少 10 个步长。 |