1. 程式人生 > 其它 >vue 實現一鍵複製功能(兩種方式)

vue 實現一鍵複製功能(兩種方式)

方法 一 :

<div class="mask-cont">
   <p><input id="input" /></p>
   <button class="btns" @click="copyToClip">複製</button>
 </div>


copyToClip:function() {
    let that = this
    var input = document.getElementById("input");
    input.value = that.address; // 要複製的文字框的內容(此處是後端返回的內容)
input.select(); // 選中文字 document.execCommand("copy"); alert("複製成功") }

方法二:下載外掛

npm install --save vue-clipboard2
main.js檔案中

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

使用一:

<template>
<div>
    <div>
      <textarea name="
複製內容" id cols="30" rows="10" v-model="value"></textarea> <button v-clipboard:copy="value" v-clipboard:success="firstCopySuccess" v-clipboard:error="firstCopyError" >第一種方式複製</button> </div> <div> <textarea name="貼上內容"
id cols="30" rows="10"></textarea> </div> </div> </template>


<script> export default { data() { return { value: "A simple vuejs 2 binding for clipboard.js!" }; }, methods: { firstCopySuccess(e) { console.log("copy arguments e:", e); alert("複製成功!"); }, firstCopyError(e) { console.log("copy arguments e:", e); alert("複製失敗!"); } } }; </script>

使用二:

<button @click="seccendCopy">第二種方式複製</button>

seccendCopy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("複製成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("複製失敗!");
        }
      );
}
<script>export default {  data() {    return {      value: "A simple vuejs 2 binding for clipboard.js!"    };  },  methods: {    firstCopySuccess(e) {      console.log("copy arguments e:", e);      alert("複製成功!");    },    firstCopyError(e) {      console.log("copy arguments e:", e);      alert("複製失敗!");    }  }};</script>————————————————版權宣告:本文為CSDN博主「Life   a dream」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。原文連結:https://blog.csdn.net/Li8L9xF/article/details/123194877