1. vue-copy-to-clipboard
Copy to clipboard Vue component
vue-copy-to-clipboard
Package: vue-copy-to-clipboard
Created by: vueComponent
Last modified: Mon, 23 May 2022 13:44:28 GMT
Version: 1.0.3
License: MIT
Downloads: 6,951
Repository: https://github.com/vueComponent/vue-copy-to-clipboard

Install

npm install vue-copy-to-clipboard
yarn add vue-copy-to-clipboard

vue-copy-to-cliboard

Copy to clipboard Vue component

Use

 $ npm install vue-copy-to-clipboard
or
$ yarn add vue-copy-to-clipboard

Examples

 // by jsx
import CopyToClipboard from 'vue-copy-to-clipboard'

export default {
  data () {
    return {
      text: 'is copy content'
    }
  },
  render (h) {
    return (
      <div>
        <CopyToClipboard text={this.text} onCopy={(result) => {
          console.log('onCopy', result)
        }}>
          <Button>Copy to Clipboard</Button>
        </CopyToClipboard>
      </div>
    )
  }
}
<template>
  <div>
    <copy-to-clipboard :text="text" @copy="handleCopy">
      <a-button>Copy to Clipboard</a-button>
    </copy-to-clipboard>
  </div>
</template>

<script>
// by template.vue
import CopyToClipboard from 'vue-copy-to-clipboard'

export default {
  components: {
    CopyToClipboard
  },
  data () {
    return {
      text: '这里可以动态生成内容'
    }
  },
  methods: {
    handleCopy (result) {
      console.log('onCopy', result)
    }
  }
}
</script>

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