clipboard.js vue使用

clipboard.js vue使用

js复制方案

1.安装

npm install clipboard --save

官网  https://clipboardjs.com/

2.demo

<template>

          <div>

            <span>{{ msg}}</span>

            <button class="btn-cli" :data-clipboard-text="msg" @click="copyMsg">点击复制</button>

          </div>

</template>

<script>

//引用组件

import Clipboard from 'clipboard'

export default {

data(){

return {

msg:'要复制的内容',

}

}

components: {

    Clipboard

  },

methods:{

    copyMsg(){

//className  点击按钮的 class .btn-cli

        const clipboard = new Clipboard(".btn-cli")

          clipboard.on('success', e => {

          //释放内存

            clipboard.destroy()

          })

         clipboard.on('error', e => {

         //释放内存

           clipboard.destroy()

         })

    }

}

}

</script>