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" />