feat(carousel): adds scale prop

CHANGELOG.en-US.md

@@ -13,6 +13,7 @@
 
 ### Feats
 
+- `n-carousel` adds `scale` prop, closes [#2340](https://github.com/TuSimple/naive-ui/issues/2340).
 - `n-tree-select` adds `clear-filter-after-select` prop.
 - `n-cascader` adds `clear-filter-after-select` prop.
 - `n-switch` adds `icon` slot.

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 
 ### Feats
 
+- `n-carousel` 新增 `scale` 属性，关闭[#2340](https://github.com/TuSimple/naive-ui/issues/2340)
 - `n-tree-select` 新增 `clear-filter-after-select` 属性
 - `n-cascader` 新增 `clear-filter-after-select` 属性
 - `n-switch` 新增 `icon` 插槽

src/carousel/demos/enUS/index.demo-entry.md

@@ -21,6 +21,7 @@ keyboard.vue
 mousewheel.vue
 simulate-drag.vue
 custom-arrow-and-dots.vue
+scale.vue
 ```
 
 ## API
@@ -42,6 +43,7 @@ custom-arrow-and-dots.vue
 | keyboard | `boolean` | `false` | Whether to switch the carousel by pressing the key, it only works when the focus is on Dots. | 2.24.0 |
 | loop | `boolean` | `true` | Whether to loop. | 2.24.0 |
 | mousewheel | `boolean` | `false` | Whether to switch the carousel through the mouse wheel. | 2.24.0 |
+| scale | `number \| [number, number] \| null` | `undefined` | When `effect` is `card`, the aspect ratio of the main card and the front and rear `card`s. When it is an array type, the first value refers to the width ratio, and the second value refers to the height ratio. |
 | show-arrow | `boolean` | `false` | Whether to show arrow buttons. | 2.24.0 |
 | show-dots | `boolean` | `true` | Whether to show dots. | 2.24.0 |
 | slides-per-view | `'auto' \| number` | `1` | Number of carousels displayed on per view. | 2.24.0 |

src/carousel/demos/enUS/scale.demo.vue

@@ -0,0 +1,49 @@
+<markdown>
+# Set aspect ratio
+
+When the `effect` property is `card`, you can customize the aspect ratio of the main card and the front and rear cards.
+
+</markdown>
+
+<template>
+  <n-carousel
+    effect="card"
+    :centered-slides="true"
+    :scale="[1, 1.2]"
+    style="height: 240px"
+  >
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+      >
+    </n-carousel-item>
+  </n-carousel>
+</template>
+
+<style>
+.carousel-img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

src/carousel/demos/zhCN/index.demo-entry.md

@@ -21,6 +21,7 @@ keyboard.vue
 mousewheel.vue
 simulate-drag.vue
 custom-arrow-and-dots.vue
+scale.vue
 ```
 
 ## API
@@ -42,6 +43,7 @@ custom-arrow-and-dots.vue
 | keyboard | `boolean` | `false` | 是否通过按键切换轮播图，只有焦点在 Dots 上时才起作用 | 2.24.0 |
 | loop | `boolean` | `true` | 是否循环播放 | 2.24.0 |
 | mousewheel | `boolean` | `false` | 是否通过鼠标滚轮切换轮播图 | 2.24.0 |
+| scale | `number \| [number, number] \| null` | `undefined` | `effect`为`card`时，主 card 和前后两个`card`的高宽，为数组类型时，第一个值指代宽度比，第二个值指代是高度比 |
 | slides-per-view | `'auto' \| number` | `1` | 每一页显示的轮播图数量 | 2.24.0 |
 | space-between | `number` | `0` | 轮播图之间的间距 | 2.24.0 |
 | show-arrow | `boolean` | `false` | 是否显示箭头按钮 | 2.24.0 |

src/carousel/demos/zhCN/scale.demo.vue

@@ -0,0 +1,49 @@
+<markdown>
+# 设置高宽比
+
+当`effect`属性为`card`时，你可以自定义，主card和前后两个card的高宽比。
+
+</markdown>
+
+<template>
+  <n-carousel
+    effect="card"
+    :centered-slides="true"
+    :scale="[1, 1.2]"
+    style="height: 240px"
+  >
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+      >
+    </n-carousel-item>
+    <n-carousel-item :style="{ width: '60%' }">
+      <img
+        class="carousel-img"
+        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+      >
+    </n-carousel-item>
+  </n-carousel>
+</template>
+
+<style>
+.carousel-img {
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

src/carousel/src/Carousel.tsx

@@ -67,6 +67,9 @@ const carouselProps = {
     type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
     default: 'bottom'
   },
+  scale: {
+    type: [Number, Array] as PropType<number | [number, number] | null>
+  },
   slidesPerView: {
     type: [Number, String] as PropType<number | 'auto'>,
     default: 1
@@ -249,13 +252,43 @@ export default defineComponent({
           [axis]: `${size}px`,
           [`margin-${spaceAxis}`]: `${spaceBetween}px`
         }
-        if (isMounted && (effect === 'fade' || effect === 'card')) {
+        if (isMounted && effect === 'fade') {
           Object.assign(style, transitionStyleRef.value)
         }
+        if (isMounted && effect === 'card') {
+          Object.assign(
+            style,
+            transitionStyleRef.value,
+            getTransformScaleStyle(i)
+          )
+        }
         slideStyles.push(style)
       }
       return slideStyles
     })
+    function getTransformScaleStyle (
+      number = realIndexRef.value
+    ): CSSProperties | null {
+      const { scale } = props
+      if (scale && (isRealPrev(number) || isRealNext(number))) {
+        const translate = isRealPrev(number) ? '-100%' : '0'
+        if (scale && Array.isArray(scale)) {
+          return {
+            transform: `scale(${1 / scale[0]},${
+              1 / scale[1]
+            }) translateX(${translate})`,
+            transformOrigin: '0% 50%'
+          }
+        } else {
+          return {
+            transform: `scale(${1 / scale}) translateX(${translate})`,
+            transformOrigin: '0% 50%'
+          }
+        }
+      } else {
+        return null
+      }
+    }
 
     // Total
     const totalViewRef = computed(() => {