test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

carousel 增加获取相同name数据

Browse Source
This commit is contained in:
catchonme 2019-06-14 11:16:06 +08:00
parent 5a1bec27ca
commit e77e0d0a0b
4 changed files with 77 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/renderers/Carousel.md
View File

@ -12,7 +12,7 @@
- `titleClassName` 图片标题类名
- `description` 图片描述
- `descriptionClassName` 图片描述类名
- `item` HTML 自定义，同[Tpl](./Tpl.md)一致
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
- `itemSchema` 自定义`schema`来展示数据
- `auto` 是否自动轮播，默认`true`
- `interval` 切换动画间隔，默认`5s`

67
examples/components/Carousel.jsx
View File

@ -2,9 +2,14 @@ export default {
type: 'page',
title: '轮播图',
data: {
carousel: [
carousel0: [
'https://www.baidu.com/img/bd_logo1.png',
'https://video-react.js.org/assets/poster.png',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
],
carousel1: [
{
item: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data in form</div>'
html: '<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'
@ -19,31 +24,53 @@ export default {
type: 'grid',
columns: [
{
type: 'carousel',
controlsTheme: 'light',
height: '300',
className: 'm-t-xxl',
options: [
{
image: 'https://video-react.js.org/assets/poster.png'
},
{
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'
}
]
type: 'panel',
title: '直接页面配置',
body: {
type: 'carousel',
controlsTheme: 'light',
height: '300',
options: [
{
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>'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
]
}
},
{
type: 'panel',
title: '使用itemSchema配置',
body: {
type: 'carousel',
name: 'carousel0',
controlsTheme: 'dark',
height: '300',
itemSchema: {
type: 'tpl',
tpl: '<img src=\"<%=data.item%>\" />'
}
}
}
]
},
{
type: 'grid',
columns: [
{
type: 'form',
title: '表单',
className: 'm-b-xxl',
title: '表单内展示',
sm: 6,
controls: [
{
type: 'carousel',
controlsTheme: 'dark',
name: 'carousel',
name: 'carousel1',
label: 'carousel',
animation: 'slide',
height: '300'

2
mock/crud/list.js
View File

@ -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'
},
{
item: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
html: '<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'

41
src/renderers/Carousel.tsx
View File

@ -213,7 +213,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
height,
controls,
controlsTheme,
placeholder
placeholder,
data
} = this.props;
const {
options,
@ -223,17 +224,31 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
} = 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 %>" +
"<% } %>"
tpl: `
<% if (data.hasOwnProperty('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.hasOwnProperty('html')) { %>
<%= data.html %>"
<% } else 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 %>
<% } else if (data.item) { %>
<%= data.item %>
<% } else { %>
<%= '未找到渲染数据' %>
<% } %>
`
}
let body:JSX.Element | null = null;
@ -270,7 +285,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
return (
<div className={cx('Carousel-item', animationName, animationStyles[status])}>
{render(`${current}/body`, itemSchema ? itemSchema : defaultSchema, {
data: isObject(option) ? option : {item: option}
data: createObject(data, isObject(option) ? option : {item: option})
})}
</div>
);