vue框架实现点击复制文本功能

vue框架实现点击复制文本功能

一、安装clipboard.js插件

npm install clipboard --save

二、在需要使用的页面引入clipboard.js

import Clipboard from 'clipboard';

三、定义添加复制的内容

  :data-clipboard-text="message"    // 绑定的数据源
  
 <input type="text" v-model="message" class="input" />
 <button class="bar_btn copy_btn" :data-clipboard-text="message" @click="copy">一键复制文案</button>

在data() {
	return {
		message: "我是可以复制的内容，请点击复制"
	}
}

四、在methods中定义的事件

 copy() {
      var clipboard = new Clipboard(".copy_btn");
      clipboard.on("success", e => {
        let instance = Toast("复制成功");
        setTimeout(() => {
          instance.close();
        }, 2000);

        // 释放内存
        clipboard.destroy();
      });

      clipboard.on("error", e => {
        // 不支持复制
        let instance = Toast("该浏览器不支持自动复制");
        setTimeout(() => {
          instance.close();
        }, 2000);

        // 释放内存
        clipboard.destroy();
      });
    }

五、效果图

六、在a-input中复制的文本框
已经安装vue-clipboard插件的基础上

 <div class="desc">
            <a-input-group compact style="width:86%">
              <a-input style="width: 7%;background:#999999;" default-value="HLS" />
              <a-input :value="hls" disabled style="width:92%"/>
            </a-input-group>
            <a @click="copy(hls)">复制地址</a>
</div>

copy (val) {
      const message = val
      this.$copyText(message).then(res => {
        if (res.code) this.$message.error(res.code)
        this.$message.success('复制成功')
      })
    },