功能:Vue如何实现点击复制功能

第一种: 原生复制该订单号

<span class="number">{{value}}</span>
<span class="copy" @click="copyName(value)">复制</span>

  copyName() {
      const text = document.querySelector(".number");
      let range = document.createRange();
      range.selectNodeContents(text);
      let selection = document.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand("Copy");
      this.$toast("复制成功");
    }

第二种:通过插件复制

// 下载插件
cnpm i vue-clipboard2

// main.js引入注册
import VueClipBoard from 'vue-clipboard2'//一键复制
Vue.use(VueClipBoard)

1、使用this.$copyText()方法进行复制

// 页面使用复制方法
copyUrl(v) {
 let _this = this
 this.$dialog.confirm({
      title: '请复制电子凭证地址到浏览器打开进行查看',
      confirmButtonText: '一键复制',
      message: v.policyUrl
    })
    .then(() => {
      this.$copyText(v.policyUrl).then(
        function () {
          _this.$toast('复制成功！')
        },
        function (e) {
          console.log('copy arguments e:', e)
        }
      )
    }).catch(() => {})
}

2、通过自定义指令复制

 <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: "复制内容"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>