vue 点击复制

方法一  点击复制

vue版

<template>

    <div>{{copys}}</div>

    <div v-clipboard:copy="copys" v-clipboard:success="copy">复制</div>

</template>

<script>

// cnpm install --save vue-clipboard2  //安装插件包

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

    export default {

        data(){

            return{

                copys:'内容'

            }

        }，

      methods：{

        copy(){

            console.log('成功复制到粘贴板！')

        }

    }，

}

方法二 点击复制

原生版

<el-button type="primary"  plain size="mini" @click="copy('13578987458')">13578987458</el-button>

//任何标签都行绑定点击事件传递参数

 <script>

    copy(val){

        let oInput=document.createElement('input')

        // 创建节点

        oInput.value=val

      // 复制

        document.body.appendChild(oInput)

      // 追加到页面

        oInput.select();

        // 选择内容

        document.execCommand("Copy"); // 执行浏览器复制命令

        this.$message({

          message: '复制成功',

          type: 'success'

        });

       // 提示信息 alert都行

        oInput.remove()

        // 移除节点

      },

</script>

---

注：若有不足之处或疑问，请留言。