Skip to content

Commit

Permalink
feat(swiper): whole new
Browse files Browse the repository at this point in the history
  • Loading branch information
@start940315
startan authored and start940315 committed Apr 7, 2022
1 parent ce16083 commit f924a8a
Show file tree
Hide file tree
Showing 17 changed files with 750 additions and 163 deletions.
24 changes: 24 additions & 0 deletions examples/swiper/demos/base.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper :duration="300" :interval="2000">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
24 changes: 24 additions & 0 deletions examples/swiper/demos/card.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper type="card" :height="280">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
42 changes: 42 additions & 0 deletions examples/swiper/demos/current.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper :current="current" :navigation="{ showSlideBtn: 'never' }">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
<div class="tdesign-demo-block-row">
<Button
size="small"
@click="current = current + 2 > 6 ? 0 : current + 1"
>
跳转到第 {{current + 2 >= 7 ? 1 : current + 2}} 项
</Button>
</div>
</div>
</template>

<script>
export default {
data() {
return {
current: 0,
};
},
};
</script>
24 changes: 24 additions & 0 deletions examples/swiper/demos/fade.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper animation="fade" :height="280">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
24 changes: 24 additions & 0 deletions examples/swiper/demos/fraction.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper :navigation="{ type: 'fraction' }">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
24 changes: 24 additions & 0 deletions examples/swiper/demos/placement.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<template>
<div class="tdesign-demo-block--swiper-new">
<t-swiper :navigation="{ placement: 'outside' }">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
50 changes: 50 additions & 0 deletions examples/swiper/demos/size.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<template>
<div>
<div class="tdesign-demo-block--swiper-new" :style="{ width: '1000px' }">
<h3>large</h3>
<t-swiper :navigation="{ size: 'large' }">
<t-swiper-item>
<div class="demo-item demo-large">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-large">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-large">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-large">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-large">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-large">6</div>
</t-swiper-item>
</t-swiper>
</div>
<div class="tdesign-demo-block--swiper-new" :style="{ width: '500px', marginTop: '20px' }">
<h3>small</h3>
<t-swiper :navigation="{ size: 'small' }">
<t-swiper-item>
<div class="demo-item demo-small">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-small">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-small">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-small">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-small">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item demo-small">6</div>
</t-swiper-item>
</t-swiper>
</div>
</div>
</template>
34 changes: 0 additions & 34 deletions examples/swiper/demos/swiper.vue
View file

This file was deleted.

37 changes: 22 additions & 15 deletions examples/swiper/demos/vertical.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,24 @@
<template>
<t-swiper direction="vertical">
<t-swiper-item>
<t-alert theme="success" message="【到期提醒】" />
</t-swiper-item>
<t-swiper-item>
<t-alert theme="info" message="【到期提醒】" />
</t-swiper-item>
<t-swiper-item>
<t-alert theme="warning" message="【到期提醒】" />
</t-swiper-item>
<t-swiper-item>
<t-alert theme="error" message="【到期提醒】" />
</t-swiper-item>
<div>这是要被忽略的</div>
</t-swiper>
<div class="tdesign-demo-block--swiper-new">
<t-swiper direction="vertical" :navigation="{ showSlideBtn: 'never' }" :height="280" :autoplay="false">
<t-swiper-item>
<div class="demo-item">1</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">2</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">3</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">4</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">5</div>
</t-swiper-item>
<t-swiper-item>
<div class="demo-item">6</div>
</t-swiper-item>
</t-swiper>
</div>
</template>
8 changes: 4 additions & 4 deletions examples/swiper/swiper.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
-- | -- | -- | -- | --
animation | String | slide | 轮播切换动画效果类型：滑动、淡入淡出等。可选项：slide/fade | N
autoplay | Boolean | true | 是否自动播放 | N
current | Number | - | 当前轮播在哪一项（下标）。支持语法糖 `v-model` | N
defaultCurrent | Number | - | 当前轮播在哪一项（下标）。非受控属性 | N
current | Number | 0 | 当前轮播在哪一项（下标）。支持语法糖 `v-model` | N
defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
duration | Number | 300 | 滑动动画时长 | N
height | Number | - | 当使用垂直方向滚动时的高度 | N
Expand All @@ -19,13 +19,13 @@ stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N
theme | String | light | 深色模式和浅色模式。可选项：light/dark | N
trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N
type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'click'`<br/> | N
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'click' | 'hover'`<br/> | N

### Swiper Events

名称 | 参数 | 描述
-- | -- | --
change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'click'`<br/>
change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'click' | 'hover'`<br/>

### SwiperNavigation

Expand Down
12 changes: 6 additions & 6 deletions site/site.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,12 +307,12 @@ export default {
path: '/vue/components/progress',
component: () => import('@/examples/progress/progress.md'),
},
// {
// title: 'Swiper 轮播框',
// name: 'swiper',
// path: '/vue/components/swiper',
// component: () => import('@/examples/swiper/swiper.md'),
// },
{
title: 'Swiper 轮播框',
name: 'swiper',
path: '/vue/components/swiper',
component: () => import('@/examples/swiper/swiper.md'),
},
{
title: 'Skeleton 骨架屏',
name: 'skeleton',
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/render-tnode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface JSXRenderContext {

export type OptionsType = VNode | JSXRenderContext | string;

const isVNode = (obj: OptionsType) => {
export const isVNode = (obj: OptionsType) => {
const vNode = h('span', '');
const VNode = vNode.constructor;
return obj instanceof VNode;
Expand Down
Loading

0 comments on commit f924a8a

Please sign in to comment.