Cuttlefish Docs
  • 简体中文

    • spz-zoom 缩放

    支持布局: container

    何时使用

    需要对图片进行缩放器时。

    代码演示

    基本用法

    最基本用法，根元素内部必须有一个子元素，默认使用第一个子元素来进行缩放。

    <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>

    分离容器

    进行缩放操作时指定一个容器进行效果展示，而不是元素本身位置。

    <spz-zoom zoom-ratio="1.8" layout="container" container-id="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>
  <div id="container"></div>

    属性

    属性名说明类型默认值是否必需
    container-id缩放效果展示的容器ID，当此属性不存在时使用元素本身作为展示的容器string-否
    interact触发行为，可选：click | touch | mouseoverstringmouseover否
    zoom-ratio缩放比例number-是
    zoom-in当图片进行缩放时，元素会自动加入该属性--否

    事件

    zoomIn

    当图片进入缩放时该事件自动触发。

    zoomOut

    当图片退出缩放时该事件自动触发。

    AI 摘要（LLM Ready）

    • 组件标识：spz-zoom
    • 用途一句话：图片缩放器。
    • 可识别属性条目：4
    • 可识别方法小节：0
    • 可识别事件小节：2
    • 关键属性名（Top）：container-id、interact、zoom-ratio、zoom-in
    • 关键方法名（Top）：无（待补充）
    • 关键事件名（Top）：zoomIn、zoomOut
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/