最近的项目中有几个地方有复制指定 url 或者 订单号 之类的需求，在移动端手动操作是比较麻烦的，不如给到 button 来点击复制体验好些。

先是上原生，测试后发现兼容性是个问题。然后陆续找了几个小组件来用，最后选择的 clipboard.js，这里堆一下简单暴力实用的写法。

npm 的地址戳这里 www.npmjs.com/package/clipboard

安装 clipboard.js

$ npm install clipboard --save

part html

demo用的是 <button> ，当然你可以 <a>、<span>、 <input> …

<template>
  <div>
    <button class="copy-txt" :data-clipboard-text="copy_txt">Click me to copy</button>
  </div>
</template>

part javascript

本用同样例适用于 vue-cli 脚手架搭建的单页组件中

import Clipboard from 'clipboard'
export default {
  data(){
    return{
      copy_txt:"this is your gots"
    }
  },
  mounted(){
    const copydemo = new Clipboard(".copy-txt")
  }
}