+ {
+ slots.default
+ ? slots.default({
+ pageIndex: pageIndex.value,
+ setPageIndex
+ })
+ : indicatorArr.map((item, index) => {
+ return
+ }
+ }
+})
\ No newline at end of file
diff --git a/carousel/src/components/carousel-next.scss b/carousel/src/components/carousel-next.scss
new file mode 100644
index 0000000..58f7bbe
--- /dev/null
+++ b/carousel/src/components/carousel-next.scss
@@ -0,0 +1,3 @@
+.devui-arrow-right {
+ right: 20px;
+}
diff --git a/carousel/src/components/carousel-next.tsx b/carousel/src/components/carousel-next.tsx
new file mode 100644
index 0000000..ccfd975
--- /dev/null
+++ b/carousel/src/components/carousel-next.tsx
@@ -0,0 +1,22 @@
+import { defineComponent, renderSlot } from 'vue'
+import DArrowRight from './arrow-right'
+import './carousel-next.scss'
+
+export default defineComponent({
+ name: 'DCarouselNext',
+ setup(props, { slots, attrs }) {
+ return () => {
+ return <>
+ {
+ slots.default
+ ? renderSlot(slots, 'default')
+ : <>
+ setPageIndex(index + 1)}>
+ })
+ }
+
+
+
+ }
+
+ }
+ }
+})
diff --git a/carousel/src/components/carousel-prev.scss b/carousel/src/components/carousel-prev.scss
new file mode 100644
index 0000000..d49d8e7
--- /dev/null
+++ b/carousel/src/components/carousel-prev.scss
@@ -0,0 +1,3 @@
+.devui-arrow-left {
+ left: 20px;
+}
diff --git a/carousel/src/components/carousel-prev.tsx b/carousel/src/components/carousel-prev.tsx
new file mode 100644
index 0000000..d3798f0
--- /dev/null
+++ b/carousel/src/components/carousel-prev.tsx
@@ -0,0 +1,22 @@
+import { defineComponent, renderSlot } from 'vue'
+import DArrowLeft from './arrow-left'
+import './carousel-prev.scss'
+
+export default defineComponent({
+ name: 'DCarouselPrev',
+ setup(props, { slots, attrs }) {
+ return () => {
+ return <>
+ {
+ slots.default
+ ? renderSlot(slots, 'default')
+ : <>
+
+
+
+ }
+
+ }
+ }
+})
diff --git a/carousel/src/composables/use-autoplay.ts b/carousel/src/composables/use-autoplay.ts
new file mode 100644
index 0000000..c4e343d
--- /dev/null
+++ b/carousel/src/composables/use-autoplay.ts
@@ -0,0 +1,26 @@
+import { onUnmounted } from 'vue'
+
+export default function useAutoplay(next, interval) {
+ let timerId
+
+ const startPlay = () => {
+ stopPlay()
+
+ timerId = setInterval(next, interval)
+ }
+
+ const stopPlay = () => {
+ if (timerId) {
+ clearInterval(timerId)
+ timerId = null
+ }
+ }
+
+ onUnmounted(() => {
+ stopPlay()
+ })
+
+ return {
+ startPlay, stopPlay
+ }
+}
\ No newline at end of file
diff --git a/carousel/src/composables/use-page.ts b/carousel/src/composables/use-page.ts
new file mode 100644
index 0000000..470fd6e
--- /dev/null
+++ b/carousel/src/composables/use-page.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+
+export default function usePage(defaultPageIndex = 1) {
+ const pageIndex = ref(defaultPageIndex)
+
+ const setPageIndex = (current: number) => {
+ pageIndex.value = current
+ }
+
+ const jumpPage = (page: number) => {
+ pageIndex.value += page
+ }
+
+ const prevPage = () => jumpPage(-1)
+
+ const nextPage = () => jumpPage(1)
+
+ return { pageIndex, setPageIndex, jumpPage, prevPage, nextPage }
+}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
new file mode 100644
index 0000000..29648c2
--- /dev/null
+++ b/docs/.vitepress/config.ts
@@ -0,0 +1,45 @@
+import { demoBlockPlugin } from 'vitepress-theme-demoblock'
+
+const sidebar = {
+ "/": [
+ { text: "快速开始", link: "/" },
+ {
+ text: "特性", children: [
+ { text: "基本用法", link: "/features/basic/" },
+ { text: "自动播放", link: "/features/autoplay/" },
+ { text: "掘金活动", link: "/features/juejin-events/" },
+ { text: "指示器位置", link: "/features/indicator-position/" },
+ { text: "自定义指示器", link: "/features/custom-indicator/" },
+ { text: "分页器位置", link: "/features/pagination-position/" },
+ { text: "自定义分页器", link: "/features/custom-pagination/" },
+ { text: "手风琴式折叠卡片", link: "/features/collapse-card/" },
+ { text: "华为", link: "/features/huawei-events/" },
+ { text: "B站", link: "/features/bilibili-events/" },
+ { text: "QQ音乐", link: "/features/qqmusic/" },
+ { text: "LeetCode", link: "/features/leetcode-card/" },
+ ]
+ }
+ ]
+}
+
+const config = {
+ base: '/vue-carousel/',
+ title: 'Vue DevUI Carousel',
+ head: [
+ ['link', { rel: 'icon', type: 'image/svg+xml', href: '/assets/logo.svg' }],
+ ],
+ themeConfig: {
+ sidebar,
+ logo: '/assets/logo.svg',
+ },
+ markdown: {
+ config: (md) => {
+ // 这里可以使用 markdown-it 插件，vitepress-theme-demoblock就是基于此开发的
+ md.use(demoBlockPlugin, {
+ cssPreprocessor: 'scss'
+ })
+ }
+ }
+}
+
+export default config
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..44ef7cf
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,13 @@
+import Theme from 'vitepress/dist/client/theme-default'
+import DCarousel from '../../../carousel'
+
+import { registerComponents } from './register-components.js'
+import 'vitepress-theme-demoblock/theme/styles/index.css'
+
+export default {
+ ...Theme,
+ enhanceApp({ app }) {
+ app.use(DCarousel)
+ registerComponents(app)
+ },
+};
diff --git a/docs/.vitepress/theme/register-components.js b/docs/.vitepress/theme/register-components.js
new file mode 100644
index 0000000..4d1f752
--- /dev/null
+++ b/docs/.vitepress/theme/register-components.js
@@ -0,0 +1,6 @@
+import Demo from 'vitepress-theme-demoblock/components/Demo.vue'
+import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'
+export function registerComponents(app) {
+ app.component('Demo', Demo)
+ app.component('DemoBlock', DemoBlock)
+}
diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
new file mode 100644
index 0000000..31fed46
--- /dev/null
+++ b/docs/assets/logo.svg
@@ -0,0 +1,30 @@
+
\ No newline at end of file
diff --git a/docs/features/autoplay/index.md b/docs/features/autoplay/index.md
new file mode 100644
index 0000000..8a62b4b
--- /dev/null
+++ b/docs/features/autoplay/index.md
@@ -0,0 +1,44 @@
+# 自动播放
+
+:::demo `autoplay`可以设置是否需要自动播放，默认值为`true`，默认每隔3000毫秒切换一次，可以通过设置`interval`自定义自动播放的间隔时间。
+
+```vue
+
+
+ +
page 1
+ page 2
+ page 3
+ page 1
+ page 2
+ page 3
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Explore The World
+
+
+ Wild Forest
+
+
+ Sunny Beach
+
+
+ City on Winter
+
+
+ Mountains - Clouds
+page 1
+ page 2
+ page 3
+
+ page 1
+ page 2
+ page 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ page 1
+ page 2
+ page 3
+
+ 
+ 
+ 
+
+
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
diff --git a/docs/features/pagination-position/index.md b/docs/features/pagination-position/index.md
new file mode 100644
index 0000000..b4919fd
--- /dev/null
+++ b/docs/features/pagination-position/index.md
@@ -0,0 +1,26 @@
+### 分页器位置
+
+:::demo
+
+```vue
+
+
+
+ 学习计划
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ page 1
+ page 2
+ page 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ page 1
+ page 2
+ page 3
+ + +#### DCarousel 组件 + +props + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| v-model | Number | 1 | 可选，当前页码 | +| autoplay | Boolean | true | 可选，是否自动播放 | +| interval | Number | 3000 | 可选，自动播放的时间间隔，单位是毫秒 | + +插槽 + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| default | -- | -- | 必选，默认插槽 | +| indicator | -- | -- | 可选，指示器插槽 | +| pagination | -- | -- | 可选，分页器插槽 | + +#### DCarouselIndicator 组件 + +props + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| v-model | Number | 1 | 可选，当前页码 | +| count | Number | -- | 可选，指示器元素数量 | + +插槽 + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| default | ({ pageIndex, setPageIndex }) => {} | -- | 可选，默认插槽 | + +#### DCarouselPrev 组件 + +插槽 + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| default | -- | -- | 可选，默认插槽 | + +#### DCarouselNext 组件 + +插槽 + +| 属性 | 类型 | 默认 | 说明 | +| ------- | ------ | ---- | -------------- | +| default | -- | -- | 可选，默认插槽 | diff --git a/docs/vite.config.ts b/docs/vite.config.ts new file mode 100644 index 0000000..b09060e --- /dev/null +++ b/docs/vite.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite' +import vueJsx from '@vitejs/plugin-vue-jsx' +import path from 'path' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vueJsx()], +}) diff --git a/index.html b/index.html new file mode 100644 index 0000000..11603f8 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + +
+ 
+
+
+
+
+
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..2d61249
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,52 @@
+
+
+
+
+ page 1
+ page 2
+ page 3
+ {{ msg }}
+ ++ Recommended IDE setup: + VSCode + + + Volar +
+ +See README.md for more information.
+ + Vite Docs + + | + Vue 3 Docs +
+ + +
+ Edit
+ components/HelloWorld.vue to test hot module replacement.
+