Clipboard MDB Pro component
Vue Bootstrap Clipboard - Bootstrap 4 & Material Design
The mdb-clipboard
is a simple Vue directive which allows
copying the given value to the user's clipboard.
Basic usage
Step 1: Import the directive from 'mdbvue'
<script>
import { mdbClipboard } from "mdbvue";
</script>
Step 2: Add mdbClipboard to the
directives
object
<script>
import { mdbClipboard } from "mdbvue";
export default {
directives: {
mdbClipboard
}
};
</script>
Step 3: Attach the directive to an element - the passed value will be copied to the user's clipboard once it's clicked
<template>
<mdb-btn v-mdb-clipboard="value" />
</template>
<script>
import { mdbClipboard, mdbBtn } from "mdbvue";
export default {
directives: {
mdbClipboard
},
components: {
mdbBtn
},
data() {
return {
value: "Copy me!"
};
}
};
</script>