{
});
expect(wrapper.element).toMatchSnapshot();
});
- it(':theme', () => {
- const wrapper = mount({
- render() {
- return (
-
- 1
- 2
-
- );
- },
- });
- expect(wrapper.element).toMatchSnapshot();
- });
it(':type', () => {
const wrapper = mount({
render() {
diff --git a/packages/components/swiper/_example/card.vue b/packages/components/swiper/_example/card.vue
index 3aaecfd76c..be85284ad1 100644
--- a/packages/components/swiper/_example/card.vue
+++ b/packages/components/swiper/_example/card.vue
@@ -1,7 +1,26 @@
-
-
- {{ item }}
-
-
+
+
+
+ 卡片缩放比例
+
+
+
+
+
+ {{ i }}
+
+
+
+
+
+
diff --git a/packages/components/swiper/_usage/props.json b/packages/components/swiper/_usage/props.json
index 59f90eed9d..dc8d0a3443 100644
--- a/packages/components/swiper/_usage/props.json
+++ b/packages/components/swiper/_usage/props.json
@@ -47,21 +47,6 @@
"defaultValue": true,
"options": []
},
- {
- "name": "theme",
- "type": "enum",
- "defaultValue": "light",
- "options": [
- {
- "label": "light",
- "value": "light"
- },
- {
- "label": "dark",
- "value": "dark"
- }
- ]
- },
{
"name": "trigger",
"type": "enum",
diff --git a/packages/components/swiper/props.ts b/packages/components/swiper/props.ts
index 2cf8ebc5d8..e7c1905110 100644
--- a/packages/components/swiper/props.ts
+++ b/packages/components/swiper/props.ts
@@ -2,7 +2,6 @@
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
* */
import { TdSwiperProps } from './type';
@@ -23,6 +22,11 @@ export default {
type: Boolean,
default: true,
},
+ /** 卡片模式下非当前展示轮播图的缩放比例 */
+ cardScale: {
+ type: Number,
+ default: 210 / 332,
+ },
/** 当前轮播在哪一项（下标） */
current: {
type: Number,
@@ -70,15 +74,6 @@ export default {
type: Boolean,
default: true,
},
- /** 深色模式和浅色模式 */
- theme: {
- type: String as PropType
,
- default: 'light' as TdSwiperProps['theme'],
- validator(val: TdSwiperProps['theme']): boolean {
- if (!val) return true;
- return ['light', 'dark'].includes(val);
- },
- },
/** 触发切换的方式：悬浮、点击等 */
trigger: {
type: String as PropType,
@@ -97,11 +92,6 @@ export default {
return ['default', 'card'].includes(val);
},
},
- /** 卡片模式下的缩放比例 */
- cardScale: {
- type: Number,
- default: 210 / 332,
- },
/** 轮播切换时触发 */
onChange: Function as PropType,
};
diff --git a/packages/components/swiper/swiper.en-US.md b/packages/components/swiper/swiper.en-US.md
index 9c65e6bdb4..da87077b60 100644
--- a/packages/components/swiper/swiper.en-US.md
+++ b/packages/components/swiper/swiper.en-US.md
@@ -6,22 +6,21 @@
name | type | default | description | required
-- | -- | -- | -- | --
-animation | String | slide | options：slide/fade | N
+animation | String | slide | options: slide/fade | N
autoplay | Boolean | true | \- | N
+cardScale | Number | 210/332 | \- | N
current | Number | 0 | `v-model` and `v-model:current` is supported | N
defaultCurrent | Number | 0 | uncontrolled property | N
-direction | String | horizontal | options：horizontal/vertical | N
+direction | String | horizontal | options: horizontal/vertical | N
duration | Number | 300 | \- | N
height | Number | - | \- | N
interval | Number | 5000 | \- | N
loop | Boolean | true | \- | N
-navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+navigation | Object / Slot / Function | - | Typescript: `SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
stopOnHover | Boolean | true | \- | N
-theme | String | light | options：light/dark | N
-trigger | String | hover | options：hover/click | N
-type | String | default | options：default/card | N
-cardScale | Number | 210/332 | scale ratio in card mode | N
-onChange | Function | | Typescript：`(current: number, context: { source: SwiperChangeSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N
+trigger | String | hover | options: hover/click | N
+type | String | default | options: default/card | N
+onChange | Function | | Typescript: `(current: number, context: { source: SwiperChangeSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N
### Swiper Events
@@ -33,7 +32,7 @@ change | `(current: number, context: { source: SwiperChangeSource })` | [see mor
name | type | default | description | required
-- | -- | -- | -- | --
-placement | String | inside | options：inside/outside | N
-showSlideBtn | String | always | options：always/hover/never | N
-size | String | medium | options：small/medium/large | N
-type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts) | N
+placement | String | inside | options: inside/outside | N
+showSlideBtn | String | always | options: always/hover/never | N
+size | String | medium | options: small/medium/large | N
+type | String | - | Typescript: `SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'bars' \| 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts) | N
diff --git a/packages/components/swiper/swiper.md b/packages/components/swiper/swiper.md
index 8eab0516ac..fed2180d1e 100644
--- a/packages/components/swiper/swiper.md
+++ b/packages/components/swiper/swiper.md
@@ -1,12 +1,14 @@
:: BASE_DOC ::
## API
+
### Swiper Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
animation | String | slide | 轮播切换动画效果类型：滑动、淡入淡出等。可选项：slide/fade | N
autoplay | Boolean | true | 是否自动播放 | N
+cardScale | Number | 210/332 | 卡片模式下非当前展示轮播图的缩放比例 | N
current | Number | 0 | 当前轮播在哪一项（下标）。支持语法糖 `v-model` 或 `v-model:current` | N
defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
@@ -16,10 +18,8 @@ interval | Number | 5000 | 轮播间隔时间 | N
loop | Boolean | true | 是否循环播放 | N
navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N
-theme | String | light | 深色模式和浅色模式。可选项：light/dark | N
trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N
type | String | default | 样式类型：默认样式、卡片样式。可选项：default/card | N
-cardScale | Number | 210/332 | 卡片模式下的缩放比例 | N
onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' \| 'click' \| 'hover'`
| N
### Swiper Events
@@ -30,7 +30,7 @@ change | `(current: number, context: { source: SwiperChangeSource })` | 轮播
### SwiperNavigation
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
placement | String | inside | 导航器位置，位于主体的内侧或是外侧。可选项：inside/outside | N
showSlideBtn | String | always | 何时显示导航器的翻页按钮：始终显示、悬浮显示、永不显示。可选项：always/hover/never | N
diff --git a/packages/components/swiper/type.ts b/packages/components/swiper/type.ts
index 84956f9c8e..2e1dda33d0 100644
--- a/packages/components/swiper/type.ts
+++ b/packages/components/swiper/type.ts
@@ -2,9 +2,10 @@
/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-12 19:17:30
* */
+
import { TNode } from '../common';
+
export interface TdSwiperProps {
/**
* 轮播切换动画效果类型：滑动、淡入淡出等
@@ -16,6 +17,11 @@ export interface TdSwiperProps {
* @default true
*/
autoplay?: boolean;
+ /**
+ * 卡片模式下非当前展示轮播图的缩放比例
+ * @default 210/332
+ */
+ cardScale?: number;
/**
* 当前轮播在哪一项（下标）
* @default 0
@@ -59,11 +65,6 @@ export interface TdSwiperProps {
* @default true
*/
stopOnHover?: boolean;
- /**
- * 深色模式和浅色模式
- * @default light
- */
- theme?: 'light' | 'dark';
/**
* 触发切换的方式：悬浮、点击等
* @default hover
@@ -74,11 +75,6 @@ export interface TdSwiperProps {
* @default default
*/
type?: 'default' | 'card';
- /**
- * 卡片模式下的缩放比例
- * @default 210/332
- */
- cardScale?: number;
/**
* 轮播切换时触发
*/