From 85b9d774fe37e75dde1caefea82361a418815aee Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Fri, 13 Sep 2024 00:41:28 +0800 Subject: [PATCH] docs: update docs --- docs/.vuepress/notes/zh/theme-guide.ts | 1 + docs/notes/theme/guide/组件/轮播图.md | 308 +++++++++++++++++++++++++ 2 files changed, 309 insertions(+) create mode 100644 docs/notes/theme/guide/组件/轮播图.md diff --git a/docs/.vuepress/notes/zh/theme-guide.ts b/docs/.vuepress/notes/zh/theme-guide.ts index dca3a185..f87b55c3 100644 --- a/docs/.vuepress/notes/zh/theme-guide.ts +++ b/docs/.vuepress/notes/zh/theme-guide.ts @@ -122,6 +122,7 @@ export const themeGuide = defineNoteConfig({ '首页布局容器', 'repoCard', 'npmBadge', + '轮播图', ], }, { diff --git a/docs/notes/theme/guide/组件/轮播图.md b/docs/notes/theme/guide/组件/轮播图.md new file mode 100644 index 00000000..ef574b89 --- /dev/null +++ b/docs/notes/theme/guide/组件/轮播图.md @@ -0,0 +1,308 @@ +--- +title: 轮播图 +icon: dashicons:images-alt2 +createTime: 2024/09/12 22:00:22 +permalink: /guide/components/swiper/ +--- + +## 概述 + +使用 `` 组件在 页面中显示轮播图片。 + +## 使用 + +使用该组件，首先需要手动安装 `swiper` 库： + +::: code-tabs +@tab pnpm + +```sh +pnpm add swiper +``` + +@tab yarn + +```sh +yarn add swiper +``` + +@tab npm + +```sh +npm install swiper +``` + +::: + +然后，手动导入 `Swiper` 组件： + +```md :no-line-numbers + + + + + +``` + +注册为全局组件： + +::: code-tabs +@tab .vuepress/client.ts + +```ts +import { defineClientConfig } from 'vuepress/client' +import Swiper from 'vuepress-theme-plume/features/Swiper.vue' + +export default defineClientConfig({ + enhance({ app }) { + app.component('Swiper', Swiper) + }, +}) +``` + +::: + +全局组件可在 其他任意 markdown 文件中使用 + +```md + +``` + + + +**示例:** + + + +## Props + +| 名称 | 类型 | 默认值 | 说明 | +| ----------------- | ---------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------- | +| items | `string \| { link: string; href?: string; alt?: string}[]` | `[]` | 图片链接数组，传入对象时，`link`表示图片链接，`href`表示跳转链接，`alt`表示图片描述 | +| width | `number \| string` | `100%` | 轮播区域宽度 | +| height | `number \| string` | `100%` | 轮播区域高度 | +| mode | `'banner' \| 'carousel' \| 'broadcast'` | `'banner'` | 轮播模式, `banner`: 轮播图; `carousel`: 走马灯; `broadcast`: 信息展播 | +| navigation | `boolean` | `true` | 是否显示导航按钮 | +| effect | `'slide' \| 'fade' \| 'cube' \| 'coverflow' \| 'flip' \| 'cards' \| 'creative'` | `'slide'` | 轮播效果 | +| delay | `number` | `3000` | 轮播间隔时间, 仅当 `mode: 'banner'` 时生效，单位 `ms` | +| speed | `number` | `300` | 动画持续时间，单位 `ms` | +| loop | `boolean` | `true` | 是否循环 | +| pauseOnMouseEnter | `boolean` | `false` | 是否鼠标悬停时暂停轮播 | +| swipe | `boolean` | `true` | 是否开启手势滑动 | + +更多 props 请参考 [Swiper 文档](https://swiperjs.com/swiper-api#parameters) + +## 参考示例 + +### 预设动画效果 + +**cube:** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**fade:** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**coverflow:** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**flip:** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**cards:** + + + +:::details 查看代码 + +```vue + +``` + +::: + +### 自定义动画效果 + +**示例 1：** + + + +::: details 查看代码 + +```vue + +``` + +::: + +**示例 2：** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**示例 3：** + + + +:::details 查看代码 + +```vue + +``` + +::: + +**示例 4：** + + + +:::details 查看代码 + +```vue + +``` + +::: + +### 走马灯 + + + +:::details 查看代码 + +```vue + +``` + +::: + +### 信息展播 + + + +:::details 查看代码 + +```vue + +``` + +:::