右键点击链接,复制链接中的文字
工作的时候遇到一个需求,不是链接形式的文字都可以实现右键点击,然后选择复制文字,但是链接形式的内容不可以,前端编写方法来实现重新定义右键点击事件。
- vue项目中的某一个表格中的某一列数据是链接方式
<a-button type="link"></a-button>
- 解决办法:vue-clipboard3 + @contextmenu自定义右键点击事件。
1)先安装vue-clipboard3;
npm install vue-clipboard3
2)在页面中引入;
import useClipboard from "vue-clipboard3";
3)自定义右键点击事件;
<a-button type="link" @contextmenu='handleRightClick' class='item'></a-button>
4)定义这个点击事件;
setup() {
const {
toClipboard } = useClipboard();
const handleRightClick = (event) => {
// 先阻止默认的右击事件
event.preventDefault();
const registerCodeBtn = document.getElementsByClassName('item')[0];
console.log(registerCodeBtn);
const textToCopy = registerCodeBtn.textContent;
toClipboard(textToCopy);
console.log('Text copied:', textToCopy);
};
这样右键点击这个链接就会获取这个链接中的文字部分在剪切板中。