在vue中使用vue-clipboard2实现点击复制功能

1.安装

npm install --save vue-clipboard2

2.在main.js中引入

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

3.1方法一（复制链接“https://www.cnblogs.com/wu-hen/”）

<template>
  <div id="home">
    <van-nav-bar title="个人博客分享" />
    <div class="twoCode">
      <img src="../../static/img/boke_erweima.png" alt="">
    </div>
    <input type="text" readonly="readonly" v-model="twoCodes" @click="copy">
  </div>
</template>

<script>
export default {
  data(){
    return {
      twoCodes:'https://www.cnblogs.com/wu-hen/'
    }
  },
  methods:{
    copy(){
      this.$copyText(this.twoCodes).then(e=>{
          this.$toast('复制成功')
        }, e=> {
          this.$toast('复制失败')
        })
    }
  }
};
</script>

3.2方法二（复制链接“https://www.cnblogs.com/wu-hen/”）

<template>
  <div id="home">
    <van-nav-bar title="个人博客分享" />
    <div class="twoCode">
      <img src="../../static/img/boke_erweima.png" alt="" />
    </div>
    <input
      type="text"
      readonly="readonly"
      v-model="twoCodes"
      v-clipboard:copy="twoCodes"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      twoCodes: "https://www.cnblogs.com/wu-hen/"
    };
  },
  methods: {
    onCopy(e) {
      this.$toast("复制成功");
    },
    onError(e) {
      this.$toast("复制失败");
    }
  }
};
</script>

4.效果展示，我是点击页面中链接进行链接复制，点击的元素可以写在其他元素上！