ic-vue-clipboard
v1.2.0
Published
An encapsulation of clipboard.js for convenient using in vue.js
Downloads
8
Readme
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 isclass-name
; an id selector#id
, than the arg isid
.
<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 modifiercut
.
<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>