复制框里的内容

html:

<span class="kuang" disabled>www.baidu.com</span>
<span class="button" data-clipboard-text="www.baidu.com" @click="copy">复制邀请码</span>

vue:

<span class="kuang" disabled>{{url}}</span>
<span class="button" :data-clipboard-text="url" @click="copy">复制邀请码</span>

css:

.kuang {
  display: inline-block;
  border: 1px #eee solid;
  width: 460px;
  height: 14px;
  padding: 12px 20px;
  color: #999;
}

.button {

    height: 40px;

    float: right;

    border: 1px solid #4e83ef;

    border-left: none;

    border-radius: 0;

    background: #4e83ef;

    color: #fff;

    }

js:

copy() {
      var clipboard = new Clipboard(".button");
      clipboard.on("success", e => {
        this.$message.success("复制成功快去邀请好友吧!");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }