Vue 自定义指令实现一键 Copy功能

Vue 自定义指令实现一键 Copy 功能

简介

Vue 自定义指令可以让我们扩展 Vue 模板语法。在这篇文章中，我们会讲解如何使用自定义指令实现一键 Copy 功能。

步骤

1. 创建一个自定义指令

javascript
Vue.directive('copy', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.addEventListener('click', function () {
// 创建一个 textarea 元素
var textarea = document.createElement('textarea')
// 设置要复制的文本内容
textarea.value = el.getAttribute('data-copy-text')
// 把 textarea 插入到页面
document.body.appendChild(textarea)
// 选中 textarea 中的文本内容
textarea.select()
// 执行复制命令
document.execCommand('copy')
// 移除 textarea 元素
document.body.removeChild(textarea)
})
}
})

1. 在模板中使用自定义指令

html
<button v-copy data-copy-text="要复制的文本内容">复制</button>

v-copy 是我们定义的自定义指令，data-copy-text 是要复制的文本内容。

点击按钮后，就会复制 data-copy-text 的值到剪切板中。

示例

下面是两个简单的示例：

1. 复制当前页面的链接地址：

html
<button v-copy data-copy-text="https://www.example.com/">复制链接</button>

1. 复制一段文本：

html
<button v-copy data-copy-text="这里是要复制的文本内容">复制文本</button>

总结

通过使用 Vue 自定义指令，我们可以很方便地扩展 Vue 模板语法，实现一些有用的功能。

在本文中，我们学习了如何使用自定义指令实现一键 Copy 功能，并给出了两个简单的示例。