欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 点击按钮复制指定内容到剪切板,复制变量值到剪切板

程序员文章站 2022-05-15 23:53:32
...

1.安装插件

npm install --save vue-clipboard2

或者

cnpm install --save vue-clipboard2

2.main.js引入,或者在使用的组件页面引入,这里在main.js引入

import Vue from 'vue' 
import VueClipboard from 'vue-clipboard2' 
Vue.use(VueClipboard)

3.使用demo

<template>
    <div class="copyBox">
          复制的内容:<span>{{copyText}}</span>
          <el-button  type="text" size="medium"
            v-clipboard:copy="copyText"     //绑定变量
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >点我复制</el-button>
    </div>
</template>
<script>
export default {
...  //vue其他代码
data(){
    return{
        copyText:'欢迎访问 Dream_xu 的博客!'
}
}
methods: {
    onCopy(){
        this.$message.success('复制成功')
    },
    onError(){
        this.$message.console.error('复制失败');
    }
}
</script>