vue 如何禁止用户复制网页内容

1.打开main.js

          1.1 直接把这段代码复制上去 就ok了

//禁止选择网页中的文字
document.onselectstart = function () { return false; }

 

好的,如果您正在使用Vue.js,您可以使用Vue指令来实现这个功能。以下是一个实现复制表格列的Vue组件的示例代码: ```html <template> <table> <thead> <tr> <th v-for="(column, index) in columns" :key="index">{{ column }}</th> <th>复制</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in rows" :key="rowIndex"> <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td> <td><button @click="copyToClipboard(rowIndex)">复制</button></td> </tr> </tbody> </table> </template> <script> export default { data() { return { columns: ['列1', '列2'], rows: [ ['值1', '值2'], ['值3', '值4'] ] }; }, methods: { copyToClipboard(rowIndex) { var text = ''; var rows = this.$el.getElementsByTagName('tr'); for (var i = 1; i < rows.length; i++) { var cells = rows[i].getElementsByTagName('td'); text += cells[rowIndex].textContent + '\n'; } navigator.clipboard.writeText(text).then(function() { alert('已复制到剪贴板'); }, function() { alert('复制失败'); }); } } }; </script> ``` 在这个示例中,我们使用Vue指令来动态渲染表格的列和行。我们使用`v-for`指令来循环遍历列和行的数据,并使用`:key`属性来指定每个元素的唯一标识。我们在每行的最后一列添加了一个复制按钮,并使用`@click`指令绑定一个`copyToClipboard`方法,当用户单击按钮时,它将会调用`copyToClipboard`函数。 在`copyToClipboard`函数中,我们使用`this.$el.getElementsByTagName`方法获取表格的所有行和单元格,并使用`textContent`属性获取每个单元格的文本内容。最后,我们将文本内容写入剪贴板,并在操作完成后显示一个提示框。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值