feat: support customize copy text

README.md

@@ -145,7 +145,7 @@ import 'vue-json-viewer/style.css'
 | ----------- |:------------- | ----------- |
 | `value` | JSON data (can be used with `v-model`) | **Required** |
 | `expand-depth` | Collapse blocs under this depth | `1`  |
-| `copyable` | Display the copy button | `false`  |
+| `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied'}` or set `true` use default copytext  | `false`  |
 | `sort` | Sort keys before displaying | `false` |
 | `boxed` | Add a fancy "boxed" style to component | `false` |
 | `theme` | Add a custom CSS class for theming purposes | `jv-light` |

README_CN.md

@@ -141,7 +141,7 @@ import 'vue-json-viewer/style.css'
 | ----------- |:------------- | ----------- |
 | `value` | json对象的值，可以使用v-model，支持响应式 | **必填** |
 | `expand-depth` | 默认展开的层级 | `1`  |
-| `copyable` | 展示复制按钮 | `false`  |
+| `copyable` | 展示复制按钮，默认文案为：copy、copied!, 你可以设置一个对象`{copyText: 'copy', copiedText: 'copied'}` 来自定义复制按钮文案 | `false`  |
 | `sort` | 按照key排序展示 | `false` |
 | `boxed` | 为组件添加一个盒样式 | `false` |
 | `theme` | 添加一个自定义的样式class用作主题 | `jv-light` |

example/app.js

@@ -13,7 +13,10 @@ new Vue({
         <json-viewer
           value={this.jsonData}
           expand-depth={5}
-          copyable
+          copyable={{
+            copyText: '复制',
+            copiedText: '复制成功'
+          }}
           boxed
           sort></json-viewer>
       </div>

lib/json-viewer.vue

@@ -8,7 +8,7 @@
         ref="clip" 
         class="jv-button"
         :class="{copied}"
-      >{{ copied ? 'copied!' : 'copy' }}</span>
+      >{{ copied ? copyText.copiedText : copyText.copyText }}</span>
     </div>
     <div 
       class="jv-code" 
@@ -54,7 +54,7 @@ export default {
       default: 1
     },
     copyable: {
-      type: Boolean,
+      type: [Boolean, Object],
       default: false
     },
     sort: {
@@ -88,8 +88,16 @@ export default {
     }
   },
   computed: {
-    jvClass () {
+    jvClass() {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
+    },
+    copyText() {
+      const { copyText, copiedText } = this.copyable
+
+      return {
+        copyText: copyText || 'copy',
+        copiedText: copiedText || 'copied!'
+      }
     }
   },
   mounted: function () {