layui/example/docs/zh-CN/components/carousel.md

189 lines
4.3 KiB
Markdown
Raw Normal View History

::: anchor
:::
2021-10-26 01:13:23 +08:00
::: title 基础使用
:::
::: demo
<template>
<lay-carousel v-model="active">
<lay-carousel-item id="1">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
</lay-carousel-item>
<lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 不同方向
:::
::: demo
<template>
<lay-carousel v-model="active" anim="updown">
<lay-carousel-item id="1">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
</lay-carousel-item>
<lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
2021-10-26 01:13:23 +08:00
::: title 控制位置
:::
::: demo
<template>
<lay-carousel v-model="active" indicator="outside">
<lay-carousel-item id="1">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目一</div>
</lay-carousel-item>
<lay-carousel-item id="2">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目二</div>
</lay-carousel-item>
<lay-carousel-item id="3">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目三</div>
</lay-carousel-item>
<lay-carousel-item id="4">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">条目四</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: title 动态遍历
:::
::: demo
<template>
<lay-carousel v-model="active">
<lay-carousel-item :id="item.id" v-for="item in arrays">
<div style="color: white;text-align: center;width:100%;height:300px;line-height:300px;background-color:#79C48C;">{{ item.text }}</div>
</lay-carousel-item>
</lay-carousel>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
const arrays = ref([
{id: "1", text: ""},
{id: "2", text: ""},
{id: "3", text: ""},
{id: "4", text: ""}
])
return {
active,
arrays
}
}
}
</script>
:::
2022-01-10 01:17:03 +08:00
::: title Carousel 属性
:::
2021-11-07 15:55:08 +08:00
::: table
| 属性 | 描述 | 可选值 |
2021-10-24 20:35:43 +08:00
| --------- | ------------ | ------------------------- |
| v-model | 当前激活项 | `--` |
| anim | 切换方向 | `default` `updown` |
| indicator | 控制器位置 | `inside` `outside` `none` |
| arrow | 切换按钮状态 | `hover` `always` `none` |
2021-11-07 15:55:08 +08:00
:::
2022-01-10 01:17:03 +08:00
::: title Carousel 事件
:::
2021-11-07 15:55:08 +08:00
::: table
| 事件 | 描述 | 可选值 |
| ------ | -------- | ------ |
| change | 切换回调 | id |
2021-11-07 15:55:08 +08:00
2021-11-07 15:56:24 +08:00
:::
2021-12-16 17:57:59 +08:00
::: comment
2022-01-12 14:19:06 +08:00
:::
::: previousNext carousel
2021-12-16 17:57:59 +08:00
:::