carousel 增加获取data中同名数据
This commit is contained in:
catchonme
parent
9a8e2c2b57
commit
7c13ad5302
|
|
@ -12,7 +12,8 @@
|
|||
- `titleClassName` 图片标题类名
|
||||
- `description` 图片描述
|
||||
- `descriptionClassName` 图片描述类名
|
||||
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
|
||||
- `item` HTML 自定义，同[Tpl](./Tpl.md)一致
|
||||
- `itemSchema` 自定义`schema`来展示数据
|
||||
- `auto` 是否自动轮播，默认`true`
|
||||
- `interval` 切换动画间隔，默认`5s`
|
||||
- `duration` 切换动画时长，默认`0.5s`
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
"image": "https://video-react.js.org/assets/poster.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
"item": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export default {
|
|||
data: {
|
||||
carousel: [
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
|
||||
item: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
|
||||
},
|
||||
{
|
||||
image: 'https://www.baidu.com/img/bd_logo1.png'
|
||||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
image: 'https://video-react.js.org/assets/poster.png'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
item: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
|
||||
},
|
||||
{
|
||||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ module.exports = function(req, res) {
|
|||
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
|
||||
},
|
||||
{
|
||||
html: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
|
||||
item: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
|
||||
},
|
||||
{
|
||||
image: 'https://video-react.js.org/assets/poster.png'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React from 'react';
|
||||
import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
|
||||
import {Renderer, RendererProps} from '../factory';
|
||||
import {autobind, createObject} from '../utils/helper';
|
||||
import {resolveVariable} from '../utils/tpl-builtin';
|
||||
import {autobind, createObject, isObject} from '../utils/helper';
|
||||
import {leftArrowIcon, rightArrowIcon} from '../components/icons';
|
||||
|
||||
const animationStyles: {
|
||||
|
|
@ -53,7 +54,14 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
|||
|
||||
state = {
|
||||
current: 0,
|
||||
options: this.props.value ? this.props.value : this.props.options ? this.props.options : [],
|
||||
options:
|
||||
this.props.value
|
||||
? this.props.value
|
||||
: this.props.options
|
||||
? this.props.options
|
||||
: resolveVariable(this.props.name, this.props.data)
|
||||
? resolveVariable(this.props.name, this.props.data)
|
||||
: [],
|
||||
showArrows: false,
|
||||
nextAnimation: ''
|
||||
};
|
||||
|
|
@ -178,24 +186,6 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
|||
)
|
||||
}
|
||||
|
||||
@autobind
|
||||
defaultSchema() {
|
||||
return {
|
||||
type: 'tpl',
|
||||
tpl:
|
||||
"<% if (data.image) { %> " +
|
||||
"<div style=\"background-image: url(<%= data.image %>)\" class=\"image <%= data.imageClassName %>\"></div>" +
|
||||
"<% if (data.title) { %> " +
|
||||
"<div class=\"title <%= data.titleClassName %>\"><%= data.title %></div>" +
|
||||
"<% } if (data.description) { %> " +
|
||||
"<div class=\"description <%= data.descriptionClassName %>\"><%= data.description %></div>" +
|
||||
"<% } %>" +
|
||||
"<% } else if (data.html) { %>" +
|
||||
"<%= data.html %>" +
|
||||
"<% } %>"
|
||||
}
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter() {
|
||||
this.setState({
|
||||
|
|
@ -223,8 +213,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
|||
height,
|
||||
controls,
|
||||
controlsTheme,
|
||||
placeholder,
|
||||
data
|
||||
placeholder
|
||||
} = this.props;
|
||||
const {
|
||||
options,
|
||||
|
|
@ -232,6 +221,20 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
|||
current,
|
||||
nextAnimation
|
||||
} = this.state;
|
||||
const defaultSchema = {
|
||||
type: 'tpl',
|
||||
tpl:
|
||||
"<% if (data.image) { %> " +
|
||||
"<div style=\"background-image: url(<%= data.image %>)\" class=\"image <%= data.imageClassName %>\"></div>" +
|
||||
"<% if (data.title) { %> " +
|
||||
"<div class=\"title <%= data.titleClassName %>\"><%= data.title %></div>" +
|
||||
"<% } if (data.description) { %> " +
|
||||
"<div class=\"description <%= data.descriptionClassName %>\"><%= data.description %></div>" +
|
||||
"<% } %>" +
|
||||
"<% } else if (data.item) { %>" +
|
||||
"<%= data.item %>" +
|
||||
"<% } %>"
|
||||
}
|
||||
|
||||
let body:JSX.Element | null = null;
|
||||
let carouselStyles: {
|
||||
|
|
@ -266,8 +269,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
|
|||
|
||||
return (
|
||||
<div className={cx('Carousel-item', animationName, animationStyles[status])}>
|
||||
{render(`${current}/body`, itemSchema ? itemSchema : this.defaultSchema(), {
|
||||
data: createObject(data, option)
|
||||
{render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, {
|
||||
data: isObject(option) ? option : {item: option}
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue