Narcissistic, Perfectly Modest

    ic-vue-clipboard

    1.2.0 • Public • Published

    v-copy

    It is an encapsulation of clipboard for convenience to use it in Vue.

    Install

    $ npm i ic-vue-clipboard || yarn add ic-vue-clipboard
    

    Usage

    import Vue from 'vue'
    import IcClipboard from 'ic-vue-clipboard'
     
    Vue.use(IcClipboard)

    Than, you can use it in component as below: <button v-copy>copied</button>

    v-copy directive supports arg, modifiers and value. If you are not familiar with these concepts, click here

    Advanced usage

    In clipboardjs, if you want to dynamically set a target, you can do it like this:

    new ClipboardJS('.btn', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    })

    In Vue, do the same stuff with an arg.

    arg

    Will copy text from it. It should be an similar css selector. Note: you should exclude the prefix of an css selector. For example: an class selector .class-name, than the arg is class-name; an id selector #id, than the arg is id.

    <div v-copy:foo>
        
    </div>

    In clipboardjs, if you want to dynamically set a text, you can do it like this:

    new ClipboardJS('.btn', {
        text: function(trigger) {
            return trigger.getAttribute('aria-label');
        }
    })

    In Vue, do the same stuff with a string value

    <div v-copy="'some texts'">
        
    </div>

    When you want to get more controls with copy, you can pass an object with options. eg: Using the directive in a component and the clicked element is a child of this component, you can pass a trigger option etc. A example as below:

    // template
    // trigger is a css select: #id, .class-name...
    <div v-copy="{ trigger: '#id', enable, success, error }">
        
    </div>
    
    import { isWechat } from 'ic-utils'
    
    <script>
        data () {
            return {
                enable: !isWechat,
            }
        },
        methods: {
            success () {
                // your logic code is here when copied
            },
            error () {
                // your handler when occured error
            }
        }
    </script>
    

    If you want to cut texts in form elements as input textarea, you can use modifier cut.

    <div v-copy.cut="{}">
        
    </div>

    By defaults, the texts of clipboard was selected, if you want to reject it, use a clear modifier:

    <div v-copy.clear>
        
    </div>

    Install

    npm i ic-vue-clipboard

    DownloadsWeekly Downloads

    2

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    28.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • qschqd