feat: add some props to adjust the text

README.md

@@ -29,6 +29,10 @@ import { fileToBase64, useCropper } from '@lizychy0329/we-cropper'
 const { showCropper, onCrop } = useCropper({
   el: '#demoContainer', // default: document.body
   aspectRatio: 1 / 1,
+  loadingText: '加载中...',
+  resetText: '还原',
+  confirmText: '确定',
+  cancelText: '取消',
 })
 
 // @vueuse/core
@@ -103,16 +107,47 @@ declare interface WeCropperOptions {
      * @default 1 / 1
      */
     aspectRatio?: number;
+
+    /**
+     * loading text
+     *
+     * @default Loading...
+     */
+    loadingText?: string
+
+    /**
+     * reset button text
+     *
+     * @default Reset
+     */
+    resetText?: string
+
+    /**
+     * confirm button text
+     *
+     * @default Confirm
+     */
+    confirmText?: string
+
+    /**
+     * cancel button text
+     *
+     * @default Cancel
+     */
+    cancelText?: string
 }
 
 export { }
 ```
 
 ## 开发调试
 
-开发：pnpm dev
+开发：pnpm dev / pnpm watch:lib
+
 生产：pnpm build:lib
 
-x 增大按钮点击区域
-x 添加文案修改接口
+~~*x 增大按钮点击区域*~~
+
+~~*x 添加文案修改接口*~~
+
 x 调整 icon

packages/cropper.vue

@@ -10,6 +10,10 @@ const props = withDefaults(defineProps<{
 } & WeCropperOptions>(), {
   modelValue: false,
   aspectRatio: 1 / 1,
+  loadingText: 'Loading...',
+  resetText: 'Reset',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
 })
 
 const emit = defineEmits<{
@@ -51,7 +55,7 @@ function cancel(): void {
     <template v-if="isCropperPending">
       <div class=":uno: absolute bg-white rounded-4 size-30 mx-auto flex flex-col justify-center items-center space-y-2 text-lg">
         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity="0.5" /><path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate" /></path></svg>
-        <span>Loading...</span>
+        <span>{{ props.loadingText }}</span>
       </div>
     </template>
     <!-- canvas -->
@@ -91,15 +95,15 @@ function cancel(): void {
           <svg class=":uno: size-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 14v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2M13.914 2.914L11.828 5H14a8 8 0 0 1 8 8h-2c0-3.308-2.692-6-6-6h-2.172l2.086 2.086L12.5 10.5L8 6l1.414-1.414L12.5 1.5z" @click="rotate(-90)" /></svg>
         </div>
         <div class=":uno: px-6 py-5" @click="reset">
-          还原
+          {{ props.resetText }}
         </div>
       </div>
       <div class=":uno: flex justify-between">
         <div class=":uno: px-6 py-5" @click="cancel">
-          取消
+          {{ props.cancelText }}
         </div>
         <div class=":uno: px-6 py-5" @click="crop">
-          确定
+          {{ props.confirmText }}
         </div>
       </div>
     </div>

packages/types.ts

@@ -19,6 +19,34 @@ export interface WeCropperOptions {
    * @default 1 / 1
    */
   aspectRatio?: number
+
+  /**
+   * loading text
+   *
+   * @default Loading...
+   */
+  loadingText?: string
+
+  /**
+   * reset button text
+   *
+   * @default Reset
+   */
+  resetText?: string
+
+  /**
+   * confirm button text
+   *
+   * @default Confirm
+   */
+  confirmText?: string
+
+  /**
+   * cancel button text
+   *
+   * @default Cancel
+   */
+  cancelText?: string
 }
 
 export type UseCropperOptions = Omit<WeCropperOptions, 'src'>