psk-copyandshare

Vue component to copy a text to clipboard.

• Report bugs: https://github.com/pauloklaus/psk-copyandshare/issues
• Live test: https://pauloklaus.com.br/playground

Install

Create a new vue project:

vue create

Install component and dependencies:

npm install --save bootstrap bootstrap-vue psk-copyandshare

Environment setting

Make a src/resources folder at the root:

mkdir src/resources

Configure the bootstrap

Create the src/resources/bootstrap-vue.js:

import Vue from "vue";
import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

Configure the psk-copyandshare

Create the src/resources/psk-copyandshare.js:

import Vue from "vue";
import CopyAndShare from "psk-copyandshare";

Vue.use(CopyAndShare, { CopyAndShareName: "MyCopyAndShare" });

Import psk-copyandshare and dependencies

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./resources/bootstrap-vue";
import "./resources/psk-copyandshare";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
    <div>
        <copy-and-share label="Copy text:" text="Random text to copy" @copied="updateCopied" /></p>
        <copy-and-share label="Copy or browse to:" text="https://github.com" @copied="updateCopied" browseButton /></p>
        <br>{{ copiedStatus }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            copiedStatus: ""
        }
    },
    methods: {
        updateCopied(message) {
            this.copiedStatus = message;
        }
    }
}
</script>

Properties

Property	Description	Required	Default
text	Text to display and copy	yes	null
autofocus	Focus on load	no	false
disabled	Disable component	no	false
label	Label description	no	null
copyTitle	Title of copy button	no	Copy and share
browseButton	Show browse button	no	false
browseTitle	Title of browse button	no	Browse to

Events

Event	Description
copied	When text is copied

Using in the browser

To use directly in the browser, import bootstrap-vue before psk-copyandshare:

<script src="https://unpkg.com/vue-boostrap" />
<script src="https://unpkg.com/psk-copyandshare" />