Nucleic Photon Magnetizer

    psk-copyandshare

    0.1.2 • Public • Published

    psk-copyandshare

    Vue component to copy a text to clipboard.

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

    Install

    npm i psk-copyandshare

    DownloadsWeekly Downloads

    4

    Version

    0.1.2

    License

    GPLv3

    Unpacked Size

    136 kB

    Total Files

    11

    Last publish

    Collaborators

    • pauloklaus