mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
62 lines
1.8 KiB
Markdown
62 lines
1.8 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Carousel 轮播
|
||
|
||
## 概述
|
||
旋转木马，一组轮播的区域
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/carousel/1.html">
|
||
<template v-slot:demo>
|
||
<Carousel :data="list" :interval="interval"></Carousel>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>传入图片数据后，默认6s一次自动轮播</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
<script>
|
||
import banner_ad from "../../images/banner_ad.png"
|
||
import banner_apply from "../../images/banner_apply.png"
|
||
import banner_tips from "../../images/banner_tips.png"
|
||
export default {
|
||
data() {
|
||
return {
|
||
interval: 3000,
|
||
list: [{
|
||
image: banner_ad,
|
||
link: ''
|
||
},{
|
||
image: banner_apply,
|
||
link: ''
|
||
},{
|
||
image: banner_tips,
|
||
link: ''
|
||
}]
|
||
}
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| data | 数据源，包含数据源对象的数组 | Array | null |
|
||
| data.image | 图片的链接 | String | null |
|
||
| data.link | 点击图片跳转的URL | String | null |
|
||
| interval | 轮播频率，多少毫秒一次 | Number | 6000 |
|
||
|