theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

❗ 重命名 docs 为 example

Browse Source
This commit is contained in:
就眠儀式
2021-11-23 11:08:40 +08:00
parent 97788e3a77
commit 4a4ee87b65
88 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
example/docs/zh-CN/components/carousel.md Normal file
View File

@@ -0,0 +1,141 @@
::: 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>
:::
::: 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>
:::
::: 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 轮播属性
:::
::: table
| 属性 | 描述 | 可选值 |
| --------- | ------------ | ------------------------- |
| v-model | 当前激活项 | `--` |
| anim | 切换方向 | `default` `updown` |
| indicator | 控制器位置 | `inside` `outside` `none` |
| arrow | 切换按钮状态 | `hover` `always` `none` |
:::
::: title 轮播事件
:::
::: table
| 事件 | 描述 | 可选值 |
| ------ | -------- | ------ |
| change | 切换回调 | id |
:::