学无先后,达者为师

网站首页 Vue 正文

vue 一键复制内容到粘贴板

作者:我是来写bug的吧 更新时间: 2022-01-08 Vue

1.安装依赖

npm install clipboard --save

2.引入

   全局注册

import Clipboard from 'clipboard';
Vue.prototype.Clipboard = Clipboard

   单个组件使用

import Clipboard from 'clipboard';

3.属性说明

data-clipboard-target:指向要复制的元素节点

data-clipboard-action:copy(复制)或者cut(剪切)

data-clipboard-text:需要复制的内容

我们可以使用 data-clipboard-text 搭配 data-clipboard-action;也可以使用 data-clipboard-target搭配 data-clipboard-action

4.使用方法

我们点击复制将快递单号进行复制,代码如下 :

<template>
  <div>
     <div>
        <span class="title">快递单号:</span>
           <div id="code">{{ expressNumber }}</div>
     </div>
     <span
        class="tagRead"
        ref="copy"
        id="copyBtn"
        data-clipboard-action="copy"
        :data-clipboard-text="expressNumber"
        @click="copy"
     >复制</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expressNumber: "11111111111111111",
    };
  },
  methods: {
    copy() {
      var clipboard = new this.Clipboard("#copyBtn");
      clipboard.on("success", () => {
        console.log('复制成功')
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        console.log("复制失败");
        clipboard.destroy();
      });
    },
  },
};
</script>

原文链接:https://blog.csdn.net/qq_55547532/article/details/122081107

栏目分类
最近更新