diff --git a/README.md b/README.md index 332ecb8..9cf51e6 100644 --- a/README.md +++ b/README.md @@ -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: diff --git a/example/app.js b/example/app.js index 9d639ae..069a3cf 100644 --- a/example/app.js +++ b/example/app.js @@ -6,6 +6,15 @@ Vue.use(JsonViewer) new Vue({ el: '#app', render() { + const scopedSlots = { + copy: ({ copied }) => { + if (copied) return + return + }, + } + const onCopied = (copyEvent) => { + alert(`Text successfully copied!\n${copyEvent.text}`); + } return (