spz-zoom 缩放
图片缩放器。
布局
布局
跳转到“布局”何时使用
跳转到“何时使用”需要对图片进行缩放器时。
代码演示
跳转到“代码演示”基本用法
跳转到“基本用法”最基本用法，根元素内部必须有一个子元素，默认使用第一个子元素来进行缩放。
<spz-zoom zoom-ratio="1.8" layout="container">
<spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>点击缩放
跳转到“点击缩放”当鼠标点击原始图片后才可以开始进行缩放操作。
<spz-zoom interact="click" zoom-ratio="2" layout="container">
<spz-img layout="responsive" width="320" height="400" src="/assets/images/rubus-idaeus.webp" alt="Rubus idaeus" object-fit="cover"></spz-img>
</spz-zoom>属性
跳转到“属性”| 属性名 | 说明 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| interact | 触发行为，可选：click | hover | mouseover |
string | mouseover |
否 |
| zoom-ratio | 缩放比例 | number | - | 是 |
| zoom-in | 当图片进行缩放时，元素会自动加入该属性 | - | - | 否 |
事件
跳转到“事件”zoomIn
跳转到“zoomIn”当图片进入缩放时该事件自动触发。
zoomOut
跳转到“zoomOut”当图片退出缩放时该事件自动触发。