第一步 创建点击对象页面元素，并绑定业务数据。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站制作、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的南澳网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

  复制链接

第二步 引入clipboard.js。

import ClipboardJS from 'clipboard';

第三步 创建ClipboardJS对象实例。

mounted() {

  this.clipboard = new ClipboardJS('.copy-button', {

    text: () => this.copyLink

  });

  ...

}

第四步：替换clipboard对象实例的默认的onClick事件。

mounted() {

  ...

  const that = this;

  const oldOnClick = this.clipboard.onClick;

  this.clipboard.onClick = function onClick(e) {

    const resource\_type = e.delegateTarget.getAttribute('data-resource-type');

    const resource\_id = e.delegateTarget.getAttribute('data-resource-id');

    console.log('resource\_type, resource\_id is', resource\_type, resource\_id)

    that.$axios

      .post(APIS.Link, {

        type: 'h6\_ugc\_detail',

        params: {ugc\_id: resource\_id, ugc\_type: resource\_type},

        \_csrf: that.$store.state.csrfToken

      })

      .then(res => {

        that.copyLink = res.data.data.link;

        oldOnClick.bind(that.clipboard)(e);

      })

      .catch(err => {

      });

  };

  ...

}

第五步：监听并处理操作成功与失败事件。

mounted() {

  ...

  this.clipboard.on('success', this.clipOptions.success);

  this.clipboard.on('error', this.clipOptions.error);

}

其中clipOptions类似如下：

computed: {

  clipOptions() {

    return {

      success: (e) => {

        this.$message.success('复制成功');

      },

      error: () => {

        this.$message.error('复制失败');

      }

    };

  },

  ...

}

第六步：vue生命周期结束时，销毁clipboard对象。

unmounted() {

  this.clipboard && this.clipboard.destroy();

}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：前端技术之：如何在Vue中使用clipboard.js复制服务端数据-创新互联
浏览路径：http://ybzwz.com/article/ddjjsp.html