spz-action 动作监听

• 需要监听其他组件（如 spz-carousel、spz-form）派发的内部 action，并在 action 触发时调用目标元素的方法。
• 需要将一个组件的状态变化同步到多个目标元素，通过 target-action 串联多个方法调用。
• 页面中存在多个同名 action 来源，需通过 action-scope 将监听范围限定在特定 DOM 区域内，避免互相干扰。

监听 spz-carousel 派发的 slideChange action，每次切换轮播时将当前页码渲染到下方区域。

<!--
  监听 spz-carousel 的 slideChange action，
  当轮播图切换时，将当前页码渲染到下方说明区域。
-->
<spz-action
  id="spz-action-base"
  action-name="slideChange"
  target-action="slide-info.rerender(data=event, redo=true)"
  layout="logic"
></spz-action>

<spz-carousel layout="responsive" width="360" height="240" controls>
  <spz-img src="https://img.staticdj.com/e858445e80fa04320cff7fd6473335d2.webp" alt="第一张" layout="responsive" width="360" height="240" object-fit="cover"></spz-img>
  <spz-img src="https://img.staticdj.com/7b45d0021c8955d7a38334a4b6a92609.webp" alt="第二张" layout="responsive" width="360" height="240" object-fit="cover"></spz-img>
  <spz-img src="https://img.staticdj.com/0c67bf474af38d7abefb6c5da5dd6770.webp" alt="第三张" layout="responsive" width="360" height="240" object-fit="cover"></spz-img>
</spz-carousel>

<spz-render id="slide-info" layout="container">
  <template data-function="function() {console.log('action data', data); return data;}">
    <div class="slide-info">
      当前第 <strong>${(data.index ?? 0) + 1}</strong> 张，共 <strong>${data.total ?? 3}</strong> 张
    </div>
  </template>
</spz-render>

通过 action-scope 将两个轮播图的监听范围分别限定在各自的容器内，互不影响。

<!--
  两个轮播图，通过 action-scope 将监听范围限定到各自的容器内，
  互不干扰，分别更新各自的页码显示。
-->
<spz-action
  id="spz-action-scope-a"
  action-name="slideChange"
  action-scope="#section-a"
  target-action="info-a.rerender(data=event, redo=true)"
  layout="logic"
></spz-action>

<spz-action
  id="spz-action-scope-b"
  action-name="slideChange"
  action-scope="#section-b"
  target-action="info-b.rerender(data=event, redo=true)"
  layout="logic"
></spz-action>

<div class="demo-sections">
  <div id="section-a" class="demo-section">
    <h4>轮播 A</h4>
    <spz-carousel layout="responsive" width="320" height="160" controls>
      <spz-img src="https://img.staticdj.com/e858445e80fa04320cff7fd6473335d2.webp" alt="A-1" layout="responsive" width="320" height="160" object-fit="cover"></spz-img>
      <spz-img src="https://img.staticdj.com/7b45d0021c8955d7a38334a4b6a92609.webp" alt="A-2" layout="responsive" width="320" height="160" object-fit="cover"></spz-img>
    </spz-carousel>
    <spz-render id="info-a" layout="container">
      <template>
        <p class="slide-label">第 <strong>${(data.index ?? 0) + 1}</strong> / ${data.total ?? 2} 张</p>
      </template>
    </spz-render>
  </div>

  <div id="section-b" class="demo-section">
    <h4>轮播 B</h4>
    <spz-carousel layout="responsive" width="320" height="160" controls>
      <spz-img src="https://img.staticdj.com/0c67bf474af38d7abefb6c5da5dd6770.webp" alt="B-1" layout="responsive" width="320" height="160" object-fit="cover"></spz-img>
      <spz-img src="https://img.staticdj.com/e858445e80fa04320cff7fd6473335d2.webp" alt="B-2" layout="responsive" width="320" height="160" object-fit="cover"></spz-img>
    </spz-carousel>
    <spz-render id="info-b" layout="container">
      <template>
        <p class="slide-label">第 <strong>${(data.index ?? 0) + 1}</strong> / ${data.total ?? 2} 张</p>
      </template>
    </spz-render>
  </div>
</div>