1. vue-clipboards
Vue2.0 directive to copy or cut text to clipboard.
vue-clipboards
Package: vue-clipboards
Created by: zhuowenli
Last modified: Tue, 28 Jun 2022 19:11:07 GMT
Version: 1.3.0
License: MIT
Downloads: 24,690
Repository: https://github.com/zhuowenli/vue-clipboards

Install

npm install vue-clipboards
yarn add vue-clipboards

vue-clipboard

📋 Vue2.0 directive to copy or cut text to clipboard.

Vue wrapper for clipboard.js.

DEMO: https://zhuowenli.github.io/vue-clipboards/

Install

$ npm install vue-clipboards

Usage

 import VueClipboards from 'vue-clipboards';

Vue.use(VueClipboards);

new Vue({
    data() {
        return {
            copyData: 'copy data'
        }
    }
});
 <button v-clipboard="copyData">Copy</button>

Event

 <button v-clipboard="copyData" @success="handleSuccess" @error="handleError">Copy</button>
 import VueClipboards from 'vue-clipboards';

Vue.use(VueClipboards);

new Vue({
    data() {
        return {
            copyData: 'copy data'
        }
    },
    methods: {
        handleSuccess(e) {
            console.log(e);
        },
        handleError(e) {
            console.log(e);
        },
    }
});

Development

  • yarn dev: Run example in development mode
  • yarn deploy: Deploy example to gh-pages
  • yarn build: Build component in umd & es format
  • yarn watch: Build component in umd & es format with watch mode

Check out your npm scripts, it's using vbuild under the hood.


Generated by create-vue-app

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin