feat(avatar-cropper, taro): 新增 shape 属性 (#2834)

jdf2e · Jan 15, 2024 · 200b714 · 200b714
1 parent f4b14b7
commit 200b714
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.vue b/packages/nutui-taro-demo/src/business/pages/avatarcropper/index.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,7 +41,7 @@ const cutImage = (url) => {
 
 :::
 
-### Shape
+### Shape v4.2.8
 
 shape: `square`, `round`
 
@@ -129,7 +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 |
+| shape`v4.2.8` | 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,7 +41,7 @@ const cutImage = (url) => {
 
 :::
 
-### 形状
+### 形状 v4.2.8
 
 支持两种形状：`square`、`round`
 
@@ -129,7 +129,7 @@ const cutImage = (url) => {
 | edit-text | 中间的文字内容 | string | 编辑 |
 | cancel-text | 取消按钮的文字 | string | 取消 |
 | cancel-confirm | 确认按钮的文字 | string | 确认 |
-| shape | 头像的形状,可选值为：`square` `round` | string | square |
+| shape`v4.2.8` | 头像的形状,可选值为：`square` `round` | string | square |
 
 ### AvatarCropper Slots
 

diff --git a/src/packages/__VUE/avatarcropper/doc.taro.md b/src/packages/__VUE/avatarcropper/doc.taro.md
@@ -41,6 +41,38 @@ const cutImage = (url) => {
 
 :::
 
+### 形状 v4.2.8
+
+支持两种形状：`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`v4.2.8` | 头像的形状,可选值为：`square` `round` | string | square |
 | size-type | 所选的图片的尺寸： 可选值：`original` `compressed` | Array | ['original', 'compressed'] |
 | source-type | 选择图片的来源： 可选值：`album` `camera` | Array | ['album', 'camera'] |
 

diff --git a/src/packages/__VUE/avatarcropper/index.taro.vue b/src/packages/__VUE/avatarcropper/index.taro.vue
@@ -18,7 +18,7 @@
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <view class="highlight" :style="highlightStyle"></view>
+      <view class="highlight" :class="{ highlight__round: shape === 'round' }" :style="highlightStyle"></view>
     </view>
     <view class="nut-cropper-popup__toolbar" :class="[toolbarPosition]">
       <slot v-if="$slots.toolbar" name="toolbar"></slot>
@@ -44,7 +44,12 @@
 import { watch, ref, reactive, toRefs, computed, PropType, onMounted } from 'vue';
 import NutButton from '../button/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarCropperToolbarPosition, AvatarCropperSizeType, AvatarCropperSourceType } from './types';
+import type {
+  AvatarCropperToolbarPosition,
+  AvatarCropperSizeType,
+  AvatarCropperSourceType,
+  AvatarCropperShape
+} from './types';
 const { create } = createComponent('avatar-cropper');
 import { IconFont } from '@nutui/icons-vue-taro';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -82,6 +87,10 @@ export default create({
       type: String,
       default: '确定'
     },
+    shape: {
+      type: String as PropType<AvatarCropperShape>,
+      default: 'square'
+    },
     sizeType: {
       type: Array as PropType<AvatarCropperSizeType[]>,
       default: () => ['original', 'compressed']