vue复制链接操作

• 给要复制的文本或者按钮加上点击事件后，并将要复制的值传过来

使用clipboard

clipboard属性

–	解释
read	从剪贴板读取数据（比如图片）
readText	从操作系统读取文
write	写入任意数据至操作系统剪贴板
writeText	写入文本至操作系统剪贴板

代码实现

 async copyLink(val) {
   //val 你要复制的文本
   return navigator.clipboard.writeText(val);
}

• 成功实现

发布测试出现问题

TypeError: Cannot read properties of undefined (reading ‘writeText’)

问题分析

Navigator的clipboard属性是有使用限制的
像我们的本地localhost或者https都属于安全上下文
而测试的机器里，因为是自己的ip域，并不是https，所以就无法读取到clipboard

解决方案

• 检测是否存在于安全上下文、以及clipboard是否可用
• window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。
• 如果是 HTTPS 协议，就是true，否则就是false。
  
• 代码增加兼容非安全域实现
• 在安全域下使用 navigator.clipboard 提升效率，非安全域退回到 document.execCommand(“copy”)

最终代码实现

  if (navigator.clipboard && window.isSecureContext) {
      this.$message.success("复制成功");
      return navigator.clipboard.writeText(val);
   }else{
     // 创建text area
        const textArea = document.createElement("textarea");
        textArea.value = val;
        // 使text area不在viewport，同时设置不可见
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        this.$message.success("复制成功");
        return new Promise((res, rej) => {
          // 执行复制命令并移除文本框
          document.execCommand("copy") ? res() : rej();
          textArea.remove();
        });
   }

document.execCommand扩展

调用execCommand()可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等.
有了这个方法,就可以很容易的实现网页中的文本编辑器.

document.execCommand(sCommand[,交互方式, 动态参数])
- sCommand为指令参数（如下例中的”2D-Position”）
- 交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框
- 动态参数一般为一可用值或属性值

常用例子

 <input type=button value=剪切 οnclick=document.execCommand('Cut')>
 
 <input type=button value=拷贝 οnclick=document.execCommand('Copy')>
 
 <input type=button value=粘贴 οnclick=document.execCommand('Paste')>
 
 <input type=button value=撤消 οnclick=document.execCommand('Undo')>
 
 <input type=button value=删除 οnclick=document.execCommand('Delete')>
 
 <input type=button value=黑体 οnclick=document.execCommand('Bold')>
 
 <input type=button value=斜体 οnclick=document.execCommand('Italic')>
 
 <input type=button value=下划线 οnclick=document.execCommand('Underline')>
 
 <input type=button value=停止 οnclick=document.execCommand('stop')>
 
 <input type=button value=保存 οnclick=document.execCommand('SaveAs')>
 
 <input type=button value=另存为 οnclick=document.execCommand('Saveas',false,'c:""test.htm')>
 
 <input type=button value=字体 οnclick=document.execCommand('FontName',false,fn)>
 
 <input type=button value=字体大小 οnclick=document.execCommand('FontSize',false,fs)>
 
 <input type=button value=刷新 οnclick=document.execCommand('refresh',false,0)> 

/*该function执行copy指令*/

function fn_doufucopy() {

edit.select();

document.execCommand('Copy');

}

 

/*该function执行paste指令*/

function fn_doufupaste() {

tt.focus();

document.execCommand('paste');

}

 

/*该function用来创建一个超链接*/

function fn_creatlink() {

document.execCommand('CreateLink',true,'true');//弹出一个对话框输入URL

//document.execCommand('CreateLink',false,'http://www.51js.com');

}

 

/*该function用来将选中的区块设为指定的背景色*/

 

function fn_change_backcolor() {

document.execCommand('BackColor',true,'#FFbbDD');//true或false都可以

}

 

/*该function用来将选中的区块设为指定的前景色,改变选中区块的字体大小,改变字体,字体变粗变斜*/

function fn_change_forecolor() {

//指定前景色

document.execCommand('ForeColor',false,'#BBDDCC');//true或false都可以

//指定背景色

document.execCommand('FontSize',false,7);     //true或false都可以

//字体必须是系统支持的字体

document.execCommand('FontName',false,'标楷体');     //true或false都可以

//字体变粗

document.execCommand('Bold');

//变斜体

document.execCommand('Italic');

}

 

/*该function用来将选中的区块加上不同的线条*/

function fn_change_selection()

{

//将选中的文字加下划线

document.execCommand('Underline');

//在选中的文字上划粗线

document.execCommand('StrikeThrough');

//将选中的部分文字变细

document.execCommand('SuperScript');

//将选中区块的下划线取消掉

document.execCommand('Underline');

}

 

/*该function用来将选中的区块排成不同的格式*/

function fn_format() {

//有序列排列

document.execCommand('InsertOrderedList');

//实心无序列排列

document.execCommand('InsertUnorderedList');

//空心无序列排列

document.execCommand('Indent');

}

 

/*该function用来将选中的区块剪下或是删除掉*/

function fn_CutOrDel() {

//删除选中的区块

//document.execCommand('Delete');

//剪下选中的区块

document.execCommand('Cut');

}