feat(avatar-cropper): 新增 shape 属性，支持 round 类型 (#2818)

close #2810
jdf2e · Jan 15, 2024 · f4b14b7 · f4b14b7
1 parent 61daab5
commit f4b14b7
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 3 deletions.
diff --git a/src/packages/__VUE/avatar/index.scss b/src/packages/__VUE/avatar/index.scss
@@ -37,7 +37,7 @@
 }
 .nut-avatar-round {
   border-radius: 50%;
-  // overflow: hidden;
+  overflow: hidden;
 }
 .nut-avatar-square {
   border-radius: $avatar-square;

diff --git a/src/packages/__VUE/avatarcropper/demo.vue b/src/packages/__VUE/avatarcropper/demo.vue
@@ -8,6 +8,19 @@
         </nut-avatar>
       </nut-avatar-cropper>
     </nut-cell>
+    <h2>形状</h2>
+    <nut-cell>
+      <nut-avatar-cropper shape="round" @confirm="cutImage">
+        <nut-avatar shape="round" size="large">
+          <img :src="imageUrl" />
+        </nut-avatar>
+      </nut-avatar-cropper>
+      <nut-avatar-cropper shape="square" @confirm="cutImage">
+        <nut-avatar shape="square" size="large">
+          <img :src="imageUrl" />
+        </nut-avatar>
+      </nut-avatar-cropper>
+    </nut-cell>
     <h2>裁剪区域toolbar插槽</h2>
     <nut-cell>
       <nut-avatar-cropper ref="avatarCropperRef" toolbar-position="top" edit-text="修改" @confirm="cutImage">

diff --git a/src/packages/__VUE/avatarcropper/doc.en-US.md b/src/packages/__VUE/avatarcropper/doc.en-US.md
@@ -41,6 +41,38 @@ const cutImage = (url) => {
 
 :::
 
+### Shape
+
+shape: `square`, `round`
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper shape="round" @confirm="cutImage">
+    <nut-avatar shape="round" size="large">
+      <img :src="imageUrl" />
+    </nut-avatar>
+  </nut-avatar-cropper>
+  <nut-avatar-cropper shape="square" @confirm="cutImage">
+    <nut-avatar shape="square" size="large">
+      <img :src="imageUrl" />
+    </nut-avatar>
+  </nut-avatar-cropper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const imageUrl = ref(
+  'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+);
+const cutImage = (url) => {
+  imageUrl.value = url;
+};
+</script>
+```
+
+:::
+
 ### Clipping region toolbar slots
 
 Customize the clipping area toolbar, and toolbar-position controls the toolbar position
@@ -97,6 +129,7 @@ const cutImage = (url) => {
 | edit-text | The text content in the middle | string | 编辑 |
 | cancel-text | Cancel button text | string | 取消 |
 | cancel-confirm | Confirm button text | string | 确认 |
+| shape | Shape of avatar. The optional value is： `square`、`round ` | string | square |
 
 ### AvatarCropper Slots
 

diff --git a/src/packages/__VUE/avatarcropper/doc.md b/src/packages/__VUE/avatarcropper/doc.md
@@ -41,6 +41,38 @@ const cutImage = (url) => {
 
 :::
 
+### 形状
+
+支持两种形状：`square`、`round`
+
+:::demo
+
+```vue
+<template>
+  <nut-avatar-cropper shape="round" @confirm="cutImage">
+    <nut-avatar shape="round" size="large">
+      <img :src="imageUrl" />
+    </nut-avatar>
+  </nut-avatar-cropper>
+  <nut-avatar-cropper shape="square" @confirm="cutImage">
+    <nut-avatar shape="square" size="large">
+      <img :src="imageUrl" />
+    </nut-avatar>
+  </nut-avatar-cropper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const imageUrl = ref(
+  'https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png'
+);
+const cutImage = (url) => {
+  imageUrl.value = url;
+};
+</script>
+```
+
+:::
+
 ### 裁剪区域toolbar插槽
 
 自定义裁剪区域工具栏，toolbar-position控制工具栏位置
@@ -97,6 +129,7 @@ const cutImage = (url) => {
 | edit-text | 中间的文字内容 | string | 编辑 |
 | cancel-text | 取消按钮的文字 | string | 取消 |
 | cancel-confirm | 确认按钮的文字 | string | 确认 |
+| shape | 头像的形状,可选值为：`square` `round` | string | square |
 
 ### AvatarCropper Slots
 

diff --git a/src/packages/__VUE/avatarcropper/index.scss b/src/packages/__VUE/avatarcropper/index.scss
@@ -93,6 +93,9 @@
       z-index: 1;
       background-color: transparent;
       box-shadow: 0 0 1000px 1000px rgba(0, 0, 0, 0.6);
+      &__round {
+        border-radius: 50%;
+      }
     }
   }
 }
diff --git a/src/packages/__VUE/avatarcropper/index.vue b/src/packages/__VUE/avatarcropper/index.vue
@@ -18,7 +18,7 @@
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <div class="highlight" :style="highlightStyle"></div>
+      <div class="highlight" :class="{ highlight__round: shape === 'round' }" :style="highlightStyle"></div>
     </div>
     <div class="nut-cropper-popup__toolbar" :class="[toolbarPosition]">
       <slot v-if="$slots.toolbar" name="toolbar"></slot>
@@ -44,7 +44,7 @@
 import { watch, ref, reactive, toRefs, computed, Ref, PropType } from 'vue';
 import NutButton from '../button/index.vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarCropperToolbarPosition } from './types';
+import type { AvatarCropperToolbarPosition, AvatarCropperShape } from './types';
 const { create } = createComponent('avatar-cropper');
 import { Refresh2, Retweet } from '@nutui/icons-vue';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -80,6 +80,10 @@ export default create({
     confirmText: {
       type: String,
       default: '确定'
+    },
+    shape: {
+      type: String as PropType<AvatarCropperShape>,
+      default: 'square'
     }
   },
   emits: ['confirm', 'cancel'],
@@ -380,6 +384,7 @@ export default create({
       // 设置新canvas的大小与裁剪区域相同
       croppedCanvas.width = width;
       croppedCanvas.height = height;
+
       // 使用drawImage方法将原canvas中指定区域的内容绘制到新canvas上
       canvas && croppedCtx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);
 

diff --git a/src/packages/__VUE/avatarcropper/types.ts b/src/packages/__VUE/avatarcropper/types.ts
@@ -1,3 +1,4 @@
 export type AvatarCropperToolbarPosition = 'top' | 'bottom';
 export type AvatarCropperSizeType = 'original' | 'compressed';
 export type AvatarCropperSourceType = 'album' | 'camera';
+export type AvatarCropperShape = 'square' | 'round';