在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.效果展示，我是點擊頁面中鏈接進行鏈接復制，點擊的元素可以寫在其他元素上！