2
0
mirror of https://github.com/tenrok/vue-json-viewer.git synced 2026-06-20 20:00:37 +03:00

feat: customize copy button with slot and timeout (updated README)

This commit is contained in:
Konstantin Barabanov
2020-03-20 11:03:09 +03:00
parent c4831cc420
commit 57ee6274c7
3 changed files with 47 additions and 9 deletions
+13 -1
View File
@@ -145,11 +145,23 @@ 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, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied'}` or set `true` use default copytext | `false` |
| `copyable` | Display the copy button, you can customize copy text just set `{copyText: 'copy', copiedText: 'copied', timeout: 2000}` 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` |
## Listeners
| Listener | Description | Value |
| ----------- |:------------- | ----------- |
| `copied` | Emits copyEvent after text copied | Clipboard success event |
## Slots
| Name | Description | Scope |
| ----------- |:------------- | ----------- |
| `copy` | Custom content for copy button | `{copied: boolean}` |
## Theming
To create custom theme, (e.g. `my-awesome-json-theme`), in two easy steps: