vue复制链接操作
- 使用clipboard
- clipboard属性
- 代码实现
- 发布测试出现问题
- 问题分析
- 解决方案
- 最终代码实现
- document.execCommand扩展
- 常用例子
- 给要复制的文本或者按钮加上点击事件后，并将要复制的值传过来
使用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');
}
