56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
|
import './code.scss';
|
||
|
|
import { Directive } from 'vue';
|
||
|
|
const vCode: Directive = {
|
||
|
|
mounted(el: HTMLElement) {
|
||
|
|
//获取代码片段
|
||
|
|
const code: HTMLElement = el.querySelector('code.hljs');
|
||
|
|
const pre = document.getElementsByTagName('pre')[0];
|
||
|
|
const html = code?.innerHTML;
|
||
|
|
const size = html.split('\n').length;
|
||
|
|
|
||
|
|
//插入行数
|
||
|
|
const ul = document.createElement('ul');
|
||
|
|
for (let i = 1; i <= size; i++) {
|
||
|
|
const li = document.createElement('li');
|
||
|
|
li.innerText = i + '';
|
||
|
|
ul.appendChild(li);
|
||
|
|
}
|
||
|
|
|
||
|
|
ul.classList.add('hljs-code-number');
|
||
|
|
|
||
|
|
el.insertBefore(ul, pre);
|
||
|
|
|
||
|
|
//插入复制功能
|
||
|
|
const copy: HTMLDivElement = document.createElement('div');
|
||
|
|
copy.classList.add('hljs-copy');
|
||
|
|
copy.innerText = '复制';
|
||
|
|
//添加点击事件
|
||
|
|
copy.addEventListener('click', () => {
|
||
|
|
//创建一个输入框
|
||
|
|
const textarea = document.createElement('textarea');
|
||
|
|
document.body.appendChild(textarea);
|
||
|
|
textarea.setAttribute('readonly', 'readonly');
|
||
|
|
textarea.value = code.innerText;
|
||
|
|
textarea.select();
|
||
|
|
if (document.execCommand('copy')) {
|
||
|
|
document.execCommand('copy');
|
||
|
|
copy.innerText = '复制成功';
|
||
|
|
}
|
||
|
|
document.body.removeChild(textarea);
|
||
|
|
});
|
||
|
|
|
||
|
|
pre.appendChild(copy);
|
||
|
|
|
||
|
|
//鼠标移入显示复制按钮
|
||
|
|
el.addEventListener('mouseout', () => {
|
||
|
|
copy.innerText = '复制';
|
||
|
|
copy.style.display = 'none';
|
||
|
|
});
|
||
|
|
el.addEventListener('mouseover', () => {
|
||
|
|
copy.style.display = 'block';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export default vCode;
|