使用场景
在同一范围内切换几组相关内容。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<AsamCarousel
v-bind="{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }"
@change="index = $event"
>
<AsamCarouselItem v-for="item in 3" :key="item" :name="String(item)">
<div class="slide">本地内容 {{ item }}</div>
</AsamCarouselItem>
</AsamCarousel>
<p class="example-paragraph" role="status">当前索引：{{ index }}</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselBasicDemo' });
import { ref } from 'vue';
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
const index = ref(0);
</script>
<style scoped>
.slide {
height: 100%;
display: grid;
place-items: center;
background: var(--asam-color-surface);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamCarousel
v-bind="{ height: '180px', autoplay: false, trigger: 'click', arrow: 'always' }"
@change="index = $event"
>
<AsamCarouselItem v-for="item in 3" :key="item" :name="String(item)">
<div class="slide">本地内容 {{ item }}</div>
</AsamCarouselItem>
</AsamCarousel>
<p class="example-paragraph" role="status">当前索引：{{ index }}</p>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselBasicDemo' });
import { ref } from 'vue';
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
const index = ref(0);
</script>
<style scoped>
.slide {
height: 100%;
display: grid;
place-items: center;
background: var(--asam-color-surface);
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
height、initialIndex、trigger、autoplay/interval、loop、direction、type 和 indicatorPosition/arrow 控制展示；change 提供当前和上一个索引。实例可切换、前进或后退。示例关闭自动播放，用户通过箭头与指示器选择。
完整使用场景
基础用法
结合使用 el-carousel 和 el-carousel-item 标签就得到了一个走马灯。 完整说明。
基础用法
<template>
<div class="block text-center">
<span class="demonstration"> 悬停指示器切换（默认） </span>
<AsamCarousel height="150px">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
<div class="block text-center ui032-mt-4">
<span class="demonstration">点击指示器切换</span>
<AsamCarousel trigger="click" height="150px">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapBasicDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-mt-4 {
margin-top: var(--asam-space-lg);
}
</style><template>
<div class="block text-center">
<span class="demonstration"> 悬停指示器切换（默认） </span>
<AsamCarousel height="150px">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
<div class="block text-center ui032-mt-4">
<span class="demonstration">点击指示器切换</span>
<AsamCarousel trigger="click" height="150px">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapBasicDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 150px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-mt-4 {
margin-top: var(--asam-space-lg);
}
</style>
动态模糊 2.6.0
添加动态模糊以给走马灯注入活力和流畅性。
motion-blur 默认 false，表示关闭运动模糊；设为 true 时开启切换时的模糊效果。下例显式开启该参数，分别展示水平与垂直切换。
动态模糊 2.6.0
<template>
<div class="block text-center">
<span class="demonstration">切换时模糊效果（默认）</span>
<AsamCarousel height="200px" motion-blur>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
<p class="text-center demonstration example-paragraph">垂直效果</p>
<!-- prettier-ignore -->
<AsamCarousel
height="200px"
direction="vertical"
motion-blur
:autoplay="false"
>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapMotionBlurDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<div class="block text-center">
<span class="demonstration">切换时模糊效果（默认）</span>
<AsamCarousel height="200px" motion-blur>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="small justify-center ui032-text-2xl">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
<p class="text-center demonstration example-paragraph">垂直效果</p>
<!-- prettier-ignore -->
<AsamCarousel
height="200px"
direction="vertical"
motion-blur
:autoplay="false"
>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapMotionBlurDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demonstration {
color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>
指示器
可以将指示器的显示位置设置在容器外部
indicator-position 属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为 outside 则会显示在外部；设置为 none 则不会显示指示器。
指示器
<template>
<AsamCarousel indicator-position="outside">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapIndicatorDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
display: flex;
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style><template>
<AsamCarousel indicator-position="outside">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapIndicatorDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
display: flex;
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
切换箭头
可以设置切换箭头的显示时机
arrow 属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示。若将 arrow 设置为 always，则会一直显示；设置为 never，则会一直隐藏。
切换箭头
<template>
<AsamCarousel :interval="5000" arrow="always">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapArrowsDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style><template>
<AsamCarousel :interval="5000" arrow="always">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapArrowsDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 300px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
自动高度
当 carousel 的 height 设置为 auto时， carousel 的高度将根据子内容的高度自动设置
自动高度
<template>
<div class="block text-center" style="height: 300px">
<span class="demonstration">每个轮播项具有不同高度</span>
<AsamCarousel height="auto" autoplay>
<AsamCarouselItem style="height: 100px">
<h3 class="small justify-center ui032-text-2xl">高度 100px</h3>
</AsamCarouselItem>
<AsamCarouselItem style="height: 200px">
<h3 class="small justify-center ui032-text-2xl">高度 200px</h3>
</AsamCarouselItem>
<AsamCarouselItem style="height: 300px">
<h3 class="small justify-center ui032-text-2xl">高度 300px</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapAutoHeightDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.carousel-item {
color: #475669;
opacity: 0.75;
margin: 0;
text-align: center;
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
display: flex;
align-items: center;
margin: 0;
text-align: center;
height: 100%;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
</style><template>
<div class="block text-center" style="height: 300px">
<span class="demonstration">每个轮播项具有不同高度</span>
<AsamCarousel height="auto" autoplay>
<AsamCarouselItem style="height: 100px">
<h3 class="small justify-center ui032-text-2xl">高度 100px</h3>
</AsamCarouselItem>
<AsamCarouselItem style="height: 200px">
<h3 class="small justify-center ui032-text-2xl">高度 200px</h3>
</AsamCarouselItem>
<AsamCarouselItem style="height: 300px">
<h3 class="small justify-center ui032-text-2xl">高度 300px</h3>
</AsamCarouselItem>
</AsamCarousel>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapAutoHeightDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.carousel-item {
color: #475669;
opacity: 0.75;
margin: 0;
text-align: center;
}
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
display: flex;
align-items: center;
margin: 0;
text-align: center;
height: 100%;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
.justify-center {
justify-content: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
</style>
卡片模式
当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
将 type 属性设置为 card 即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，卡片模式可以通过直接点击两侧的幻灯片进行切换。
卡片模式
<template>
<AsamCarousel :interval="4000" type="card" height="200px">
<AsamCarouselItem v-for="item in 6" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapCardDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style><template>
<AsamCarousel :interval="4000" type="card" height="200px">
<AsamCarouselItem v-for="item in 6" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapCardDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
垂直布局
默认情况下，方向 direction 为 水平 horizontal。通过设置 direction 为 vertical 来让走马灯在垂直方向上显示。
垂直布局
<template>
<p class="text-center demonstration example-paragraph">普通垂直布局</p>
<AsamCarousel height="200px" direction="vertical" :autoplay="false">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
<p class="text-center demonstration example-paragraph">卡片垂直布局</p>
<!-- prettier-ignore -->
<AsamCarousel
height="400px"
direction="vertical"
type="card"
:autoplay="false"
>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamCarouselCapVerticalDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<p class="text-center demonstration example-paragraph">普通垂直布局</p>
<AsamCarousel height="200px" direction="vertical" :autoplay="false">
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
<p class="text-center demonstration example-paragraph">卡片垂直布局</p>
<!-- prettier-ignore -->
<AsamCarousel
height="400px"
direction="vertical"
type="card"
:autoplay="false"
>
<AsamCarouselItem v-for="item in 4" :key="item">
<h3 class="ui032-text-2xl ui032-justify-center">{{ item }}</h3>
</AsamCarouselItem>
</AsamCarousel>
</template>
<script setup>
defineOptions({ name: 'AsamCarouselCapVerticalDemo' });
import { AsamCarousel, AsamCarouselItem } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.text-center {
text-align: center;
}
</style>
<style scoped>
.ui032-text-2xl {
font-size: 1.5rem;
}
.ui032-justify-center {
justify-content: center;
}
</style>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>API
属性 AsamCarouselProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
initialIndex | 初始状态激活的幻灯片的索引，从 0 开始 | number | undefined | 0 |
height | carousel 的高度 | string | undefined | "" |
trigger | 指示器的触发方式 | enum"hover" | "click"完整类型："hover" | "click" | undefined | "hover" |
autoplay | 是否自动切换 | boolean | undefined | true |
interval | 自动切换的时间间隔，单位为毫秒 | number | undefined | 3000 |
indicatorPosition | 指示器的位置 | enum"" | "none" | "outside"完整类型："" | "none" | "outside" | undefined | "" |
arrow | 切换箭头的显示时机 | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | undefined | "hover" |
type | carousel 的类型 | enum"" | "card"完整类型："" | "card" | undefined | "" |
cardScale | 当 type 为 card时，二级卡的缩放大小 | number | undefined | 0.83 |
loop | 是否循环显示 | boolean | undefined | true |
direction | 显示方向 | enum"horizontal" | "vertical"完整类型："horizontal" | "vertical" | undefined | "horizontal" |
pauseOnHover | 鼠标悬浮时暂停自动切换 | boolean | undefined | true |
motionBlur | 添加动态模糊以给走马灯注入活力和流畅性。 | boolean | undefined | false |
onChange | — | ((current: number, prev: number) => any) | undefined | — |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamCarouselProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamCarouselProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamCarouselProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamCarouselProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamCarouselProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamCarouselProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
实例方法与状态 AsamCarouselExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamCarouselExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamCarouselProps | — |
$attrs | — | AsamCarouselExpose["$attrs"] | — |
$refs | — | AsamCarouselExpose["$refs"] | — |
$slots | — | AsamCarouselSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: "change", current: number, prev: number) => void | — |
$el | — | any | — |
$options | — | (AsamCarouselExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamCarouselExpose)["$nextTick"] | — |
$watch | — | (AsamCarouselExpose)["$watch"] | — |
type | — | enum"" | "card"完整类型："" | "card" | — |
height | — | string | — |
direction | — | enum"horizontal" | "vertical"完整类型："horizontal" | "vertical" | — |
loop | — | boolean | — |
trigger | — | enum"hover" | "click"完整类型："hover" | "click" | — |
arrow | — | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | — |
initialIndex | — | number | — |
autoplay | — | boolean | — |
interval | — | number | — |
indicatorPosition | — | enum"" | "none" | "outside"完整类型："" | "none" | "outside" | — |
cardScale | — | number | — |
pauseOnHover | — | boolean | — |
onChange | — | ((current: number, prev: number) => any) | undefined | — |
motionBlur | 添加动态模糊以给走马灯注入活力和流畅性。 | boolean | undefined | — |
activeIndex | 当前幻灯片的索引 | number | — |
setActiveItem | — | (index: number | string) => void | — |
prev | — | () => void | — |
next | — | () => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamCarouselExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamCarouselExpose["$router"] | — |
类型 AsamCarouselInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamCarouselExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamCarouselProps | — |
$attrs | — | AsamCarouselExpose["$attrs"] | — |
$refs | — | AsamCarouselExpose["$refs"] | — |
$slots | — | AsamCarouselSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: "change", current: number, prev: number) => void | — |
$el | — | any | — |
$options | — | (AsamCarouselInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamCarouselInstance)["$nextTick"] | — |
$watch | — | (AsamCarouselInstance)["$watch"] | — |
type | — | enum"" | "card"完整类型："" | "card" | — |
height | — | string | — |
direction | — | enum"horizontal" | "vertical"完整类型："horizontal" | "vertical" | — |
loop | — | boolean | — |
trigger | — | enum"hover" | "click"完整类型："hover" | "click" | — |
arrow | — | enum"hover" | "always" | "never"完整类型："hover" | "always" | "never" | — |
initialIndex | — | number | — |
autoplay | — | boolean | — |
interval | — | number | — |
indicatorPosition | — | enum"" | "none" | "outside"完整类型："" | "none" | "outside" | — |
cardScale | — | number | — |
pauseOnHover | — | boolean | — |
onChange | — | ((current: number, prev: number) => any) | undefined | — |
motionBlur | 添加动态模糊以给走马灯注入活力和流畅性。 | boolean | undefined | — |
activeIndex | 当前幻灯片的索引 | number | — |
setActiveItem | — | (index: number | string) => void | — |
prev | — | () => void | — |
next | — | () => void | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamCarouselExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamCarouselExpose["$router"] | — |
插槽 AsamCarouselSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamCarouselSlots)["default"] | — |
类型 AsamCarouselContext
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
root | — | Ref<HTMLElement | undefined, HTMLElement | undefined> | — |
items | — | Ref<AsamCarouselItemContext[], AsamCarouselItemContext[]> | — |
isCardType | — | Ref<boolean, boolean> | — |
isVertical | — | Ref<boolean, boolean> | — |
loop | — | boolean | — |
cardScale | — | number | — |
addItem | — | (item: AsamCarouselItemContext) => void | — |
removeItem | — | (item: AsamCarouselItemContext) => void | — |
setActiveItem | — | (index: number) => void | — |
setContainerHeight | — | (height: number) => void | — |
事件 AsamCarouselEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
change | 当前轮播项切换时触发。 | (current: number, prev: number) => boolean | — |
类型 AsamCarouselItemContext
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
props | — | (AsamCarouselItemContext)["props"] | — |
states | — | AsamCarouselItemStates | — |
uid | — | number | — |
getVnode | — | () => VNode | — |
translateItem | — | (index: number, activeIndex: number, oldIndex?: number) => void | — |
类型 AsamCarouselItemPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
name | — | string | undefined | — |
label | — | (AsamCarouselItemPropsPublic)["label"] | — |
类型 AsamCarouselItemStates
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
hover | — | boolean | — |
translate | — | number | — |
scale | — | number | — |
active | — | boolean | — |
ready | — | boolean | — |
inStage | — | boolean | — |
animating | — | boolean | — |
类型 AsamCarouselPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
loop | — | (AsamCarouselPropsPublic)["loop"] | — |
trigger | — | enum"hover" | "click"完整类型：(AsamCarouselPropsPublic)["trigger"] | — |
height | — | string | undefined | — |
type | — | enum"" | "card"完整类型：(AsamCarouselPropsPublic)["type"] | — |
direction | — | enum"horizontal" | "vertical"完整类型：(AsamCarouselPropsPublic)["direction"] | — |
initialIndex | — | number | undefined | — |
autoplay | — | (AsamCarouselPropsPublic)["autoplay"] | — |
interval | — | number | undefined | — |
indicatorPosition | — | enum"" | "none" | "outside"完整类型：(AsamCarouselPropsPublic)["indicatorPosition"] | — |
arrow | — | enum"hover" | "always" | "never"完整类型：(AsamCarouselPropsPublic)["arrow"] | — |
cardScale | — | number | undefined | — |
pauseOnHover | — | (AsamCarouselPropsPublic)["pauseOnHover"] | — |
motionBlur | — | boolean | undefined | — |
用法与契约补充说明
基础用法
结合使用 el-carousel 和 el-carousel-item 标签就得到了一个走马灯。每一个页面的内容是完全可定制的，把你想要展示的内容放在 el-carousel-item 标签内。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置 trigger 属性为 click，可以达到点击触发的效果。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
initialIndex
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
height
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
trigger
必填：否；声明来源：上游声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "click"
默认值与来源
"hover"（已安装运行时；已安装组件）固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'hover'（2.14.7；源码事实，未作为 ASAM 运行实测）
autoplay
必填：否；声明来源：上游声明。
autoplay 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
interval
必填：否；声明来源：上游声明。
默认值与来源
3000（已安装运行时；已安装组件）固定上游文档默认：3000（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：3000（2.14.7；源码事实，未作为 ASAM 运行实测）
indicatorPosition
必填：否；声明来源：上游声明。
indicatorPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "none" / "outside"
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
arrow
必填：否；声明来源：上游声明。
arrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
默认值与来源
"hover"（已安装运行时；已安装组件）固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'hover'（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "card"
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
cardScale
必填：否；声明来源：上游声明。
默认值与来源
0.83（已安装运行时；已安装组件）固定上游文档默认：0.83（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0.83（2.14.7；源码事实，未作为 ASAM 运行实测）
loop
必填：否；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
direction
必填：否；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
默认值与来源
"horizontal"（已安装运行时；已安装组件）固定上游文档默认：horizontal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）
pauseOnHover
必填：否；声明来源：上游声明。
pauseOnHover 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
motionBlur
必填：否；声明来源：上游声明。
motionBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(current: number, prev: number): any
key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
style
必填：否；声明来源：依赖声明。
AsamCarouselProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamCarouselProps, AsamCarouselExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCarouselProps
type PublicContract = {
readonly "initialIndex"?: number | undefined;
readonly "height"?: string | undefined;
readonly "trigger"?: "hover" | "click" | undefined;
readonly "autoplay"?: boolean | undefined;
readonly "interval"?: number | undefined;
readonly "indicatorPosition"?: "" | "none" | "outside" | undefined;
readonly "arrow"?: "hover" | "always" | "never" | undefined;
readonly "type"?: "" | "card" | undefined;
readonly "cardScale"?: number | undefined;
readonly "loop"?: boolean | undefined;
readonly "direction"?: "horizontal" | "vertical" | undefined;
readonly "pauseOnHover"?: boolean | undefined;
readonly "motionBlur"?: boolean | undefined;
readonly "onChange"?: ((current: number, prev: number) => any) | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamCarouselProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamCarouselProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamCarouselProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamCarouselProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamCarouselProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamCarouselProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "change", ...args: [current: number, prev: number]): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamCarouselExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
type
必填：是；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "card"
height
必填：是；声明来源：上游声明。
direction
必填：是；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
loop
必填：是；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
trigger
必填：是；声明来源：上游声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "click"
arrow
必填：是；声明来源：上游声明。
arrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
initialIndex
必填：是；声明来源：上游声明。
autoplay
必填：是；声明来源：上游声明。
autoplay 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
interval
必填：是；声明来源：上游声明。
indicatorPosition
必填：是；声明来源：上游声明。
indicatorPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "none" / "outside"
cardScale
必填：是；声明来源：上游声明。
pauseOnHover
必填：是；声明来源：上游声明。
pauseOnHover 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(current: number, prev: number): any
motionBlur
必填：否；声明来源：上游声明。
motionBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
activeIndex
必填：是；声明来源：上游声明。
setActiveItem
必填：是；声明来源：上游声明。
setActiveItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: string | number): void
prev
必填：是；声明来源：上游声明。
prev 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
next
必填：是；声明来源：上游声明。
next 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamCarouselExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamCarouselExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamCarouselExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamCarouselExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamCarouselExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamCarouselExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamCarouselExpose["height"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamCarouselExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamCarouselExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamCarouselExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamCarouselExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamCarouselExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamCarouselExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamCarouselExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamCarouselExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamCarouselExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamCarouselExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamCarouselExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamCarouselExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamCarouselExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamCarouselExpose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamCarouselExpose, AsamTableColumnExpose, AsamCarouselProps, AsamCarouselSlots, AsamCarouselItemExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCarouselExpose
type PublicContract = {
"$": AsamCarouselExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamCarouselProps;
"$attrs": AsamCarouselExpose["$attrs"];
"$refs": AsamCarouselExpose["$refs"];
"$slots": AsamCarouselSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: "change", current: number, prev: number) => void;
"$el": any;
"$options": (AsamCarouselExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamCarouselExpose)["$nextTick"];
"$watch": (AsamCarouselExpose)["$watch"];
readonly "type": "" | "card";
readonly "height": string;
readonly "direction": "horizontal" | "vertical";
readonly "loop": boolean;
readonly "trigger": "hover" | "click";
readonly "arrow": "hover" | "always" | "never";
readonly "initialIndex": number;
readonly "autoplay": boolean;
readonly "interval": number;
readonly "indicatorPosition": "" | "none" | "outside";
readonly "cardScale": number;
readonly "pauseOnHover": boolean;
readonly "onChange"?: ((current: number, prev: number) => any) | undefined;
readonly "motionBlur"?: boolean | undefined;
"activeIndex": number;
"setActiveItem": (index: number | string) => void;
"prev": () => void;
"next": () => void;
"$route": AsamCarouselExpose["$route"];
"$router": AsamCarouselExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: "change", ...args: [current: number, prev: number]): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamCarouselInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
type
必填：是；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "card"
height
必填：是；声明来源：上游声明。
direction
必填：是；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
loop
必填：是；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
trigger
必填：是；声明来源：上游声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "click"
arrow
必填：是；声明来源：上游声明。
arrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
initialIndex
必填：是；声明来源：上游声明。
autoplay
必填：是；声明来源：上游声明。
autoplay 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
interval
必填：是；声明来源：上游声明。
indicatorPosition
必填：是；声明来源：上游声明。
indicatorPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "none" / "outside"
cardScale
必填：是；声明来源：上游声明。
pauseOnHover
必填：是；声明来源：上游声明。
pauseOnHover 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
onChange
必填：否；声明来源：上游声明。
onChange 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(current: number, prev: number): any
motionBlur
必填：否；声明来源：上游声明。
motionBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
activeIndex
必填：是；声明来源：上游声明。
setActiveItem
必填：是；声明来源：上游声明。
setActiveItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: string | number): void
prev
必填：是；声明来源：上游声明。
prev 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
next
必填：是；声明来源：上游声明。
next 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamCarouselExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamCarouselExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamCarouselExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamCarouselExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamCarouselExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamCarouselExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamCarouselExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamCarouselExpose["height"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamCarouselExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamCarouselExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamCarouselExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamCarouselExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamCarouselExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamCarouselExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamCarouselExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamCarouselExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamCarouselExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamCarouselExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamCarouselExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamCarouselExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamCarouselExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamCarouselExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamCarouselInstance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamCarouselInstance, AsamCarouselExpose, AsamTableColumnExpose, AsamCarouselProps, AsamCarouselSlots, AsamCarouselItemExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamCarouselInstance
type PublicContract = {
"$": AsamCarouselExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamCarouselProps;
"$attrs": AsamCarouselExpose["$attrs"];
"$refs": AsamCarouselExpose["$refs"];
"$slots": AsamCarouselSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: "change", current: number, prev: number) => void;
"$el": any;
"$options": (AsamCarouselInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamCarouselInstance)["$nextTick"];
"$watch": (AsamCarouselInstance)["$watch"];
readonly "type": "" | "card";
readonly "height": string;
readonly "direction": "horizontal" | "vertical";
readonly "loop": boolean;
readonly "trigger": "hover" | "click";
readonly "arrow": "hover" | "always" | "never";
readonly "initialIndex": number;
readonly "autoplay": boolean;
readonly "interval": number;
readonly "indicatorPosition": "" | "none" | "outside";
readonly "cardScale": number;
readonly "pauseOnHover": boolean;
readonly "onChange"?: ((current: number, prev: number) => any) | undefined;
readonly "motionBlur"?: boolean | undefined;
"activeIndex": number;
"setActiveItem": (index: number | string) => void;
"prev": () => void;
"next": () => void;
"$route": AsamCarouselExpose["$route"];
"$router": AsamCarouselExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：上游声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: AsamTableColumnExpose): any
AsamCarouselSlots 公开类型视图
import type { AsamCarouselSlots, AsamCarouselExpose, AsamTableColumnExpose } from '@asam-ui/ui';
// AsamCarouselSlots
type PublicContract = {
"default"?: (AsamCarouselSlots)["default"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};参数与事件说明
root
必填：是；声明来源：上游声明。
root 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
items
必填：是；声明来源：上游声明。
items 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
isCardType
必填：是；声明来源：上游声明。
isCardType 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
isVertical
必填：是；声明来源：上游声明。
isVertical 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
loop
必填：是；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
cardScale
必填：是；声明来源：上游声明。
addItem
必填：是；声明来源：上游声明。
addItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(item: AsamCarouselItemContext): void
removeItem
必填：是；声明来源：上游声明。
removeItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(item: AsamCarouselItemContext): void
setActiveItem
必填：是；声明来源：上游声明。
setActiveItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number): void
setContainerHeight
必填：是；声明来源：上游声明。
setContainerHeight 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(height: number): void
AsamCarouselContext 公开类型视图
import type { Ref } from 'vue';
import type { AsamCarouselContext, AsamCarouselItemContext, AsamCarouselExpose } from '@asam-ui/ui';
// AsamCarouselContext
type PublicContract = {
"root": Ref<HTMLElement | undefined, HTMLElement | undefined>;
"items": Ref<AsamCarouselItemContext[], AsamCarouselItemContext[]>;
"isCardType": Ref<boolean, boolean>;
"isVertical": Ref<boolean, boolean>;
"loop": boolean;
"cardScale": number;
"addItem": (item: AsamCarouselItemContext) => void;
"removeItem": (item: AsamCarouselItemContext) => void;
"setActiveItem": (index: number) => void;
"setContainerHeight": (height: number) => void;
};参数与事件说明
change
必填：是；声明来源：上游声明。
change 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(current: number, prev: number): boolean
AsamCarouselEmits 公开类型视图
import type { AsamCarouselEmits, AsamCarouselExpose } from '@asam-ui/ui';
// AsamCarouselEmits
type PublicContract = {
"change": (current: number, prev: number) => boolean;
};参数与事件说明
props
必填：是；声明来源：上游声明。
props 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
states
必填：是；声明来源：上游声明。
states 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
states.hover:boolean— 上游声明枚举：
false/truestates.translate:number— 上游声明states.scale:number— 上游声明states.active:boolean— 上游声明枚举：
false/truestates.ready:boolean— 上游声明枚举：
false/truestates.inStage:boolean— 上游声明枚举：
false/truestates.animating:boolean— 上游声明枚举：
false/true
uid
必填：是；声明来源：上游声明。
getVnode
必填：是；声明来源：上游声明。
getVnode 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): VNode<import("vue").RendererNode, import("vue").RendererElement, { [key: string]: any; }>
translateItem
必填：是；声明来源：上游声明。
translateItem 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(index: number, activeIndex: number, oldIndex?: number | undefined): void
AsamCarouselItemContext 公开类型视图
import type { VNode } from 'vue';
import type { AsamCarouselItemContext, AsamCarouselItemStates, AsamCarouselExpose, AsamCarouselProps } from '@asam-ui/ui';
// AsamCarouselItemContext
type PublicContract = {
"props": (AsamCarouselItemContext)["props"];
"states": AsamCarouselItemStates;
"uid": number;
"getVnode": () => VNode;
"translateItem": (index: number, activeIndex: number, oldIndex?: number) => void;
};参数与事件说明
name
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
label
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamCarouselItemPropsPublic 公开类型视图
import type { AsamCarouselItemPropsPublic, AsamCarouselProps } from '@asam-ui/ui';
// AsamCarouselItemPropsPublic
type PublicContract = {
readonly "name"?: string | undefined;
readonly "label"?: (AsamCarouselItemPropsPublic)["label"];
};参数与事件说明
hover
必填：是；声明来源：上游声明。
hover 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
translate
必填：是；声明来源：上游声明。
scale
必填：是；声明来源：上游声明。
active
必填：是；声明来源：上游声明。
active 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ready
必填：是；声明来源：上游声明。
ready 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
inStage
必填：是；声明来源：上游声明。
inStage 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
animating
必填：是；声明来源：上游声明。
animating 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamCarouselItemStates 公开类型视图
import type { AsamCarouselItemStates, AsamCarouselExpose } from '@asam-ui/ui';
// AsamCarouselItemStates
type PublicContract = {
"hover": boolean;
"translate": number;
"scale": number;
"active": boolean;
"ready": boolean;
"inStage": boolean;
"animating": boolean;
};参数与事件说明
loop
必填：否；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
trigger
必填：否；声明来源：上游声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "click"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'hover'（2.14.7；源码事实，未作为 ASAM 运行实测）
height
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "card"
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
direction
必填：否；声明来源：上游声明。
direction 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："horizontal" / "vertical"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）
initialIndex
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
autoplay
必填：否；声明来源：上游声明。
autoplay 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
interval
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：3000（2.14.7；源码事实，未作为 ASAM 运行实测）
indicatorPosition
必填：否；声明来源：上游声明。
indicatorPosition 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "none" / "outside"
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
arrow
必填：否；声明来源：上游声明。
arrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "always" / "never"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'hover'（2.14.7；源码事实，未作为 ASAM 运行实测）
cardScale
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0.83（2.14.7；源码事实，未作为 ASAM 运行实测）
pauseOnHover
必填：否；声明来源：上游声明。
pauseOnHover 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
motionBlur
必填：否；声明来源：上游声明。
motionBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamCarouselPropsPublic 公开类型视图
import type { AsamCarouselPropsPublic, AsamCarouselProps } from '@asam-ui/ui';
// AsamCarouselPropsPublic
type PublicContract = {
readonly "loop"?: (AsamCarouselPropsPublic)["loop"];
readonly "trigger"?: (AsamCarouselPropsPublic)["trigger"];
readonly "height"?: string | undefined;
readonly "type"?: (AsamCarouselPropsPublic)["type"];
readonly "direction"?: (AsamCarouselPropsPublic)["direction"];
readonly "initialIndex"?: number | undefined;
readonly "autoplay"?: (AsamCarouselPropsPublic)["autoplay"];
readonly "interval"?: number | undefined;
readonly "indicatorPosition"?: (AsamCarouselPropsPublic)["indicatorPosition"];
readonly "arrow"?: (AsamCarouselPropsPublic)["arrow"];
readonly "cardScale"?: number | undefined;
readonly "pauseOnHover"?: (AsamCarouselPropsPublic)["pauseOnHover"];
readonly "motionBlur"?: boolean | undefined;
};