vue点击按钮实现自动复制文字内容原生js和依赖包vue-clipboard3

285 阅读1分钟

vue点击按钮实现自动复制文字内容

参数介绍

copyctn:需要复制的文本内容

代码内容:

const copycode = (copyctn) => {
  var aux = document.createElement('input');
  aux.setAttribute('value', copyctn);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand('copy');
  document.body.removeChild(aux);
};

现成依赖包vue-clipboard3

使用方法:

  1. 安装 1.1. npm 安装

     npm install vue-clipboard3
    

1 1.2. yarn 安装

	yarn add vue-clipboard3

1 2.使用

import { message } from 'ant-design-vue';
setup() {
	 //一键复制
    const { toClipboard } = useClipboard();
    /*
    * 点击的方法
    * @item 需要复制的内容
    */
    const copyClick = async item => {
      try {
        await toClipboard(item);
        message.success('复制成功');
      } catch (e) {
        console.error(e);
      }
    };
	return {
		copyClick,
		}
}

原文链接:blog.csdn.net/weixin_4569…