vue实现复制到剪切板

vue2实现复制到剪切板

vue中提供了vue-clipboard2，vue-clipboard2是前端能够调用剪切板的一个插件

安装依赖

npm install --save vue-clipboard2

引入依赖

在main.js文件里

import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

使用

页面代码里使用this.$copyText()进行复制

<el-button type="primary" @click="copyURL">复制链接</el-button>

copyURL() {
      let params = {
        id: this.id
      };
      this.$http.get('xxx', { params }).then((resp) => {
        if (resp.code === 0) {
          this.$copyText(resp.data).then(
            res => {
              this.$message.success('复制链接成功');
            },
            err => {
              this.$message.error('复制链接失败');
            });
        } else {
          this.$message.error('复制链接失败,接口错误:' + resp.data);
        }
      });
    },

vue3实现复制到剪切板

使用vue-clipboard3实现复制到剪切板

安装依赖

pnpm install --save vue-clipboard3

使用

<el-button type="primary" @click="copyURL('复制内容')">复制链接</el-button>

<script lang="js">
import useClipboard from 'vue-clipboard3'
export default {
  setup() {
    const { toClipboard } = useClipboard()
    const copyURL = (info) => {
      toClipboard(info).then(
	      res => {
	          ElMessage.success('复制链接成功');
	      },
	      err => {
	          ElMessage.error('复制链接失败');
	      });
    }
    return { copyURL }
  }
}
</script>