vue 实现点击复制文本

方法一：

1. 安装依赖

npm install clipboard --save

2. 在需要使用的组件里 引入

important Clipboard from 'clipboard'

3. 在HTML里是这样的

 <p class="address" @click="copyAddress" :data-clipboard-text="address"></p>

4. 在js里调用

// 复制地址
    copyAddress() {
      let clipboard = new Clipboard(".address");
      clipboard.on("success", (e) => {
        this.$notify({
          title: "成功",
          message: "复制成功",
          type: "success",
          duration: "1500",
        });
        //  释放内存
        e.clearSelection();
        // 销毁
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$notify({
          title: "失败",
          message: "该浏览器不支持复制",
          type: "error",
          duration: "2000",
        });
        // 释放内存
        e.clearSelection();
        // 销毁
        clipboard.destroy();
      });
    },

方法二：

安装插件

npm install --save vue-clipboard2

在main.js里添加

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

使用：

  <template>     
      <div class="container">     
          {{qq}}     
          <button type="button" @click="doCopy">复制QQ</button>     
      </div>   
  </template>     
  <script> export default {     
  data() {        
  return {          
          qq: '123456'        
      }      
  },      
  methods: {        
      doCopy: function () {           
          this.$copyText(this.qq).then(function (e) {             
          alert('复制成功')              
          console.log(e)           
      }, function (e) {               
          alert('复制失败')               
          console.log(e)           
        })         
      }      
    }   
  }   
  </script>