vue-clipboard2 复制粘贴换行符/r/n如何处理？

前言

vue-clipboard2 复制粘贴内容时，会把/r/n一起复制，粘贴时如果想直接使用，就还得去掉/r/n

为什么会出现如此的需求呢？

比如说，我们需要复制这段字符串：

select * from webxiu;/r/nselect * from post;

最完美的粘贴是这样子的：

select * from webxiu;
select * from post;

可以直接使用，但是vue-clipboard2却不是这样子的，他依旧会复制粘贴最初的字符串。

解决方法

大家都知道textarea可以自动把/r/n字符串去掉，并且换行展示，所以我们就利用它

js创建一个textarea，并把我们要复制的内容放入到textarea中，然后在复制textarea的内容即可。

代码实现

copy(text) {
  return new Promise(resolve => {
    // 如果复制单行，用input
    // 如果复制多行，用textarea
    const textarea = document.createElement("textarea"); 	 
    // 创建一个textarea框获取需要复制的文本内容
    textarea.value = text;
    // app就是页面已存在的id选择器，主要目的是把textarea放入
    const appDiv = document.getElementById("app");
    appDiv.appendChild(textarea);
    textarea.select();
    document.execCommand("Copy");
    textarea.remove();
    resolve(true);
  });
}

这样通过调用copy()就可以轻松实现复制带换行符的字符串了，而且放到任意地方都可以直接使用。