mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
fix:修复轮播图动作无效问题&修复toast提示信息类型问题
This commit is contained in:
hsm-lv
parent
2b4e4945df
commit
8247ac9058
@ -129,36 +129,14 @@ itemSchema: {
|
||||
|
||||
## 事件表
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
|-------------------|------------------------------------------------|----------------------|
|
||||
| change | `activeIndex: number` 激活图片的索引 <br> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ------------------------------------------------------------------------------ | ---------------- |
|
||||
| change | `activeIndex: number` 激活图片的索引 <br> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
|
||||
|
||||
## 动作表
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
|-------------------|-------------------------|------------------------|
|
||||
| next | - | 下一张 |
|
||||
| prev | - | 上一张 |
|
||||
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
|
||||
|
||||
- `type` 请设置成 `carousel`
|
||||
- `className` 外层 Dom 的类名
|
||||
- `options` 轮播面板数据，默认`[]`，支持以下模式
|
||||
- 图片
|
||||
- `image` 图片链接
|
||||
- `imageClassName` 图片类名
|
||||
- `title` 图片标题
|
||||
- `titleClassName` 图片标题类名
|
||||
- `description` 图片描述
|
||||
- `descriptionClassName` 图片描述类名
|
||||
- `html` HTML 自定义，同[Tpl](./Tpl)一致
|
||||
- `itemSchema` 自定义`schema`来展示数据
|
||||
- `auto` 是否自动轮播，默认`true`
|
||||
- `interval` 切换动画间隔，默认`5s`
|
||||
- `duration` 切换动画时长，默认`0.5s`
|
||||
- `width` 宽度，默认`auto`
|
||||
- `height` 高度，默认`200px`
|
||||
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
|
||||
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
|
||||
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
|
||||
- `thumbMode` 图片默认缩放模式，可以配置 `"cover" | "contain"`
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| ---------- | ------------------------------------ | ---------- |
|
||||
| next | - | 下一张 |
|
||||
| prev | - | 上一张 |
|
||||
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
|
||||
|
||||
88
examples/components/EventAction/CarouselEvent.jsx
Normal file
88
examples/components/EventAction/CarouselEvent.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: '标签页组件事件',
|
||||
regions: ['body', 'toolbar', 'header'],
|
||||
body: [
|
||||
{
|
||||
type: 'action',
|
||||
label: '上一张',
|
||||
level: 'primary',
|
||||
className: 'mr-3 mb-3',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'prev',
|
||||
componentId: 'carousel_001'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'action',
|
||||
label: '下一张',
|
||||
level: 'primary',
|
||||
className: 'mr-3 mb-3',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'next',
|
||||
componentId: 'carousel_001'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'action',
|
||||
label: '滚动到第三张',
|
||||
level: 'primary',
|
||||
className: 'mr-3 mb-3',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'goto-image',
|
||||
componentId: 'carousel_001',
|
||||
activeIndex: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'carousel',
|
||||
id: 'carousel_001',
|
||||
auto: false,
|
||||
thumbMode: 'cover',
|
||||
animation: 'slide',
|
||||
height: 300,
|
||||
options: [
|
||||
{
|
||||
image:
|
||||
'https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
thumbMode: 'contain',
|
||||
image:
|
||||
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
}
|
||||
],
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'toast',
|
||||
msg: '${activeIndex}'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -87,6 +87,7 @@ import treeSelectEventSchema from './EventAction/treeSelectEvent';
|
||||
import FormEventActionSchema from './EventAction/FormEvent';
|
||||
import TransferEventSchema from './EventAction/TransferEvent';
|
||||
import ServiceEventSchema from './EventAction/ServiceEvent';
|
||||
import CarouselEventSchema from './EventAction/CarouselEvent';
|
||||
import WizardSchema from './Wizard';
|
||||
import ChartSchema from './Chart';
|
||||
import EChartsEditorSchema from './ECharts';
|
||||
@ -610,6 +611,11 @@ export const examples = [
|
||||
path: 'examples/event/transfer',
|
||||
component: makeSchemaRenderer(TransferEventSchema)
|
||||
},
|
||||
{
|
||||
label: '轮播图组件',
|
||||
path: 'examples/event/carousel',
|
||||
component: makeSchemaRenderer(CarouselEventSchema)
|
||||
},
|
||||
{
|
||||
label: 'Service组件',
|
||||
path: 'examples/event/service',
|
||||
|
||||
@ -63,7 +63,7 @@ export class CmptAction implements Action {
|
||||
}
|
||||
|
||||
// 执行组件动作
|
||||
return component.doAction?.(action, action.args);
|
||||
return component?.doAction?.(action, action.args);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,11 +32,8 @@ export class ToastAction implements Action {
|
||||
renderer: ListenerContext,
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
event.context.env.notify?.(
|
||||
action.msgType || 'info',
|
||||
resolveVariableAndFilter(action.msg, event?.data, '| raw'),
|
||||
action
|
||||
);
|
||||
const msg = resolveVariableAndFilter(action.msg, action.args, '| raw');
|
||||
event.context.env.notify?.(action.msgType || 'info', String(msg), action);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -18,6 +18,7 @@ import {Icon} from '../components/icons';
|
||||
import {BaseSchema, SchemaCollection, SchemaName, SchemaTpl} from '../Schema';
|
||||
import Html from '../components/Html';
|
||||
import Image from '../renderers/Image';
|
||||
import {ScopedContext, IScopedContext} from '../Scoped';
|
||||
|
||||
/**
|
||||
* Carousel 轮播图渲染器。
|
||||
@ -194,12 +195,11 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
||||
|
||||
doAction(action: Action, data: object, throwErrors: boolean): any {
|
||||
const actionType = action?.actionType as string;
|
||||
|
||||
|
||||
if (!!~['next', 'prev'].indexOf(actionType)) {
|
||||
this.autoSlide(actionType);
|
||||
}
|
||||
else if (actionType === 'goto-image') {
|
||||
this.changeSlide((data as any).activeIndex);
|
||||
} else if (actionType === 'goto-image') {
|
||||
this.changeSlide(action.activeIndex);
|
||||
}
|
||||
}
|
||||
|
||||
@ -480,4 +480,19 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
||||
@Renderer({
|
||||
type: 'carousel'
|
||||
})
|
||||
export class CarouselRenderer extends Carousel {}
|
||||
export class CarouselRenderer extends Carousel {
|
||||
static contextType = ScopedContext;
|
||||
|
||||
constructor(props: CarouselProps, context: IScopedContext) {
|
||||
super(props);
|
||||
|
||||
const scoped = context;
|
||||
scoped.registerComponent(this);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
super.componentWillUnmount?.();
|
||||
const scoped = this.context as IScopedContext;
|
||||
scoped.unRegisterComponent(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1246,7 +1246,7 @@ export default class ComboControl extends React.Component<ComboProps> {
|
||||
closeOnClick: true
|
||||
},
|
||||
{
|
||||
buttons: conditions.map(item => ({
|
||||
buttons: conditions?.map(item => ({
|
||||
label: item.label,
|
||||
onClick: (e: any) => {
|
||||
this.addItemWith(item);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user