feat: 中间的文字提示可以通过props更改

jdf2e · Sep 18, 2023 · b70e30a · b70e30a
1 parent 843bac6
commit b70e30a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/src/packages/__VUE/avatarcropper/demo.vue b/src/packages/__VUE/avatarcropper/demo.vue
@@ -10,7 +10,7 @@
     </nut-cell>
     <h2>裁剪区域bottom插槽</h2>
     <nut-cell>
-      <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" cancel-text="关闭" @confirm="cutImage">
+      <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" edit-text="修改" @confirm="cutImage">
         <nut-avatar size="large">
           <img :src="imageUrl" />
         </nut-avatar>

diff --git a/src/packages/__VUE/avatarcropper/doc.en-US.md b/src/packages/__VUE/avatarcropper/doc.en-US.md
@@ -49,7 +49,7 @@ Customize the clipping area toolbar, and BNs-position controls the toolbar posit
 
 ```vue
 <template>
-  <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" @confirm="cutImage">
+  <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" edit-text="修改" @confirm="cutImage">
     <nut-avatar size="large">
       <img :src="imageUrl" />
     </nut-avatar>
@@ -94,6 +94,7 @@ const cutImage = (url: string) => {
 | maxZoom       | Maximum zoom                                                                        | number | 3       |
 | space         | The gap reserved on both sides of the clipping area                                 | number | 20      |
 | btnsPosition  | Location of the toolbar in the clipping area. The optional value is：`top` `bottom` | string | bottom  |
+| editText      | The text content in the middle                                                      | string | 编辑    |
 | cancelText    | Cancel button text                                                                  | string | 取消    |
 | cancelConfirm | Confirm button text                                                                 | string | 确认    |
 

diff --git a/src/packages/__VUE/avatarcropper/doc.md b/src/packages/__VUE/avatarcropper/doc.md
@@ -49,7 +49,7 @@ const cutImage = (url: string) => {
 
 ```vue
 <template>
-  <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" @confirm="cutImage">
+  <nut-avatar-cropper ref="avatarCropperRef" btns-position="top" edit-text="修改" @confirm="cutImage">
     <nut-avatar size="large">
       <img :src="imageUrl" />
     </nut-avatar>
@@ -94,6 +94,7 @@ const cutImage = (url: string) => {
 | maxZoom       | 最大缩放倍数                                | number | 3      |
 | space         | 裁剪区域两边预留的间隙                      | number | 10     |
 | btnsPosition  | 裁剪区域工具栏位置,可选值为：`top` `bottom` | string | bottom |
+| editText      | 中间的文字内容                              | string | 编辑   |
 | cancelText    | 取消按钮的文字                              | string | 取消   |
 | cancelConfirm | 确认按钮的文字                              | string | 确认   |
 

diff --git a/src/packages/__VUE/avatarcropper/index.scss b/src/packages/__VUE/avatarcropper/index.scss
@@ -1,7 +1,7 @@
 .nut-avatar-cropper {
   position: relative;
   &::after {
-    content: '编辑';
+    content: attr(data-edit-text);
     position: absolute;
     top: 0;
     left: 0;

diff --git a/src/packages/__VUE/avatarcropper/index.vue b/src/packages/__VUE/avatarcropper/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-avatar-cropper">
+  <view class="nut-avatar-cropper" :data-edit-text="editText">
     <slot></slot>
     <input
       ref="inputImageRef"
@@ -68,6 +68,10 @@ export default create({
       type: String as PropType<BtnsPosition>,
       default: 'bottom'
     },
+    editText: {
+      type: String,
+      default: '编辑'
+    },
     cancelText: {
       type: String,
       default: '取消'