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 (
@@ -19,6 +28,15 @@ new Vue({ }} boxed sort> +
+
) }, diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue index 85b4b00..bdc5688 100644 --- a/lib/json-viewer.vue +++ b/lib/json-viewer.vue @@ -8,7 +8,14 @@ ref="clip" class="jv-button" :class="{copied}" - >{{ copied ? copyText.copiedText : copyText.copyText }} + > + + {{ copied ? copyText.copiedText : copyText.copyText }} + +
{ - this.onCopied() + clipBoard.on('success', (e) => { + this.onCopied(e) }) } }, @@ -131,15 +139,15 @@ export default { } }) }, - onCopied() { + onCopied(copyEvent) { if (this.copied) { return; } this.copied = true setTimeout(() => { this.copied = false - }, 2000) - this.$emit('copied') + }, this.copyText.timeout) + this.$emit('copied', copyEvent) }, toggleExpandCode () { this.expandCode = !this.expandCode