轮播图
吴少文 2022/9/30 vue
# 轮播图
轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件
# 何时使用
- 轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系
- 单图轮播：该样式通常用于承载运营 banner，是一个位置相对固定的模块
# 示例
# 组件属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| height | 高度 | string | -- | -- |
| autoplay | 自动切换 | boolean | -- | -- |
| interval | 自动切换的时间间隔，单位为毫秒 | number | -- | -- |
| indicatorPosition | 指示器的位置 | string | -- | outside/none |
| arrow | 切换箭头的显示时机 | string | hover | always/hover/never |
| type | 风格类型 | string | -- | card |
| loop | 循环显示 | boolean | true | -- |
| direction | 展示的方向 | string | horizontal | horizontal/vertical |
| children | 标签项 Item | array | -- | -- |
# Item
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 地址 | string | -- | -- |
| fit | 适配模式 | string | -- | fill / contain / cover / none / scale-down |
| alt | 原生alt | string | '图片' | -- |
| lazy | 开启懒加载 | boolean | false | -- |
| isJump | 是否点击跳转 | boolean | false | -- |
| isNewOpen | 是否新开页面 | boolean | false | -- |
| isExternal | 是否外部链接 | boolean | false | -- |
| link | 跳转地址 | string | -- | -- |