76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
|
||
import { Message } from 'element-ui';
|
||
|
||
const vCopy = {
|
||
// 名字爱取啥取啥
|
||
/*
|
||
bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
|
||
el: 作用的 dom 对象
|
||
value: 传给指令的值，也就是我们要 copy 的值
|
||
*/
|
||
bind(el, { value }) {
|
||
el.$value = value; // 用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
|
||
el.handler = () => {
|
||
if (!el.$value) {
|
||
// 值为空的时候，给出提示，我这里的提示是用的 element-ui 的提示，你们随意
|
||
Message.warning('无复制内容');
|
||
return;
|
||
}
|
||
// 动态创建 textarea 标签
|
||
const textarea = document.createElement('textarea');
|
||
// 将该 textarea 设为只读，同时将 textarea 移出可视区域
|
||
textarea.readOnly = 'readonly';
|
||
textarea.style.position = 'absolute';
|
||
textarea.style.left = '-9999px';
|
||
// 将要 copy 的值赋给 textarea 标签的 value 属性
|
||
textarea.value = el.$value;
|
||
// 将 textarea 插入到 body 中
|
||
document.body.appendChild(textarea);
|
||
// 选中值并复制
|
||
textarea.select();
|
||
textarea.setSelectionRange(0, textarea.value.length);
|
||
//就是可以通过设置起始于终止位置，来选中一段文本中的一部分,这里其实就是全选
|
||
const result = document.execCommand('Copy');
|
||
//html原生的复制功能
|
||
/**
|
||
* 拓展
|
||
* :document.execCommand(”selectAll”) 全选
|
||
* :document.execCommand(open) 打开
|
||
* :document.execCommand(saveAs) 另存为
|
||
*/
|
||
if (result) {
|
||
Message.success('复制成功');
|
||
}
|
||
document.body.removeChild(textarea);
|
||
//复制成功然后删除textarea标签
|
||
};
|
||
// 绑定点击事件，就是所谓的一键 copy 啦
|
||
el.addEventListener('click', el.handler);
|
||
},
|
||
// 当传进来的值更新的时候触发
|
||
componentUpdated(el, { value }) {
|
||
el.$value = value;
|
||
},
|
||
// 指令与元素解绑的时候，移除事件绑定
|
||
unbind(el) {
|
||
el.removeEventListener('click', el.handler);
|
||
},
|
||
};
|
||
|
||
//使用示例 <el-button v-copy="info">复制</el-button>
|
||
//data() {
|
||
// return {
|
||
// info:'要复制的内容'
|
||
// }
|
||
|
||
export default vCopy;
|