vue中實現複製粘貼功能

最近在項目中遇到點擊按鈕複製鏈接功能，將其總結如下：

$\color{#ff8247}{安裝}$

npm install vue-clipboard2 --save

$\color{#ff8218}{引入}$

在main.js中引入以下代碼：

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

$\color{#ff6347}{使用}$

• template中

  <v-btn class="btn_style" text v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError"> Share </v-btn>
  
  <!-- 複製鏈接彈框 -->
  <v-dialog v-model="show" max-width="290">
    <v-card>
      <v-card-title>{{this.tipInfo}}</v-card-title>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="info" text @click="show = false">
          確定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  

  注意：我使用的是vuetify組件，可以將第一行代碼換爲以下代碼：

  <div v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError">share</div>
  

  解析：

  • v-clipboard:copy：是要複製的鏈接。
  • v-clipboard:success="onCopy"：是複製成功的方法。
  • v-clipboard:error="onError"：是複製失敗的方法。

• methods中

  methods: {
      // 複製成功
      onCopy() {
        this.show = true;
        this.tipInfo = "鏈接複製成功";
      },
      // 複製失敗
      onError() {
        this.show = false;
        this.tipInfo = "鏈接複製失敗";
      }
   }
  

$\color{#ff6347}{結果}$