feat:Carousel轮播图事件动作补充

docs/zh-CN/components/carousel.md

@@ -127,6 +127,20 @@ itemSchema: {
 | animation                    | `string`  | fade                   | 切换动画效果，默认`fade`，另有`slide`模式               |
 | thumbMode                    | `string`  | `"cover" \| "contain"` | 图片默认缩放模式                                        |
 
+## 事件表
+
+| 事件名称           | 事件参数                                        | 说明                  |
+|-------------------|------------------------------------------------|----------------------|
+| change            | `activeIndex: number` 激活图片的索引 <br> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
+
+## 动作表
+
+| 动作名称           | 动作配置                 | 说明                    |
+|-------------------|-------------------------|------------------------|
+| next              | -                       | 下一张                  |
+| prev              | -                       | 上一张                  |
+| goto-image        | `activeIndex: number` 切换图片的索引 | 切换轮播图    |
+
 - `type` 请设置成 `carousel`
 - `className` 外层 Dom 的类名
 - `options` 轮播面板数据，默认`[]`，支持以下模式

src/renderers/Carousel.tsx

@@ -13,6 +13,7 @@ import {
   isArrayChildrenModified,
   getPropValue
 } from '../utils/helper';
+import {Action} from '../types';
 import {Icon} from '../components/icons';
 import {BaseSchema, SchemaCollection, SchemaName, SchemaTpl} from '../Schema';
 import Html from '../components/Html';
@@ -191,6 +192,17 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     this.clearAutoTimeout();
   }
 
+  doAction(action: Action, data: object, throwErrors: boolean): any {
+    const actionType = action?.actionType as string;
+    
+    !!~['next', 'prev'].indexOf(actionType) && this.autoSlide(actionType);
+    
+    actionType === 'goto-image' && this.setState({
+      current: (data as any).activeIndex,
+      nextAnimation: ''
+    });
+  }
+
   @autobind
   prepareAutoSlide() {
     if (this.state.options.length < 2) {
@@ -230,9 +242,9 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
   }
 
   @autobind
-  transitFramesTowards(direction: string, nextAnimation: string) {
+  async transitFramesTowards(direction: string, nextAnimation: string) {
     let {current} = this.state;
-
+    let prevIndex = current;
     switch (direction) {
       case 'left':
         current = this.getFrameId('next');
@@ -242,6 +254,18 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         break;
     }
 
+    const {dispatchEvent, data} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        activeIndex: current,
+        prevIndex
+      })
+    );
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     this.setState({
       current,
       nextAnimation

src/types.ts

@@ -107,6 +107,7 @@ export interface Action extends Button {
     | 'clear-and-submit'
     | 'toast'
     | 'goto-step'
+    | 'goto-image'
     | 'expand'
     | 'collapse'
     | 'step-submit';