4.3 KiB
4.3 KiB
::: anchor :::
::: title 基础使用 :::
::: demo
条目一
条目二
条目三
条目四
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: title 不同方向 :::
::: demo
条目一
条目二
条目三
条目四
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: title 控制位置 :::
::: demo
条目一
条目二
条目三
条目四
<script>
import { ref } from 'vue'
export default {
setup() {
const active = ref("1")
return {
active
}
}
}
</script>
:::
::: title 动态遍历 :::
::: demo
{{ item.text }}
<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>
:::
::: title Carousel 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| v-model | 当前激活项 | -- |
| anim | 切换方向 | default updown |
| indicator | 控制器位置 | inside outside none |
| arrow | 切换按钮状态 | hover always none |
:::
::: title Carousel 事件 :::
::: table
| 事件 | 描述 | 可选值 |
|---|---|---|
| change | 切换回调 | id |
:::
::: previousNext carousel :::