【10分钟学习Vue自定义指令开发】复制指令v-copy

news2024/11/22 5:54:10

概述

HTML模板部分 `<template>`

这部分定义了组件的HTML结构。它包含四个div元素，其中两个使用了v-copy指令。这个指令是自定义的，用于实现点击复制文本的功能。

第一个div元素使用了v-copy指令，但没有提供任何值，所以它会复制该元素的文本内容。
第二个div元素没有使用任何指令。
第三个div元素使用了v-copy指令，并提供了一个字符串值'此处复制'，这意味着当用户点击这个元素时，会复制这个字符串而不是元素的文本内容。
第四个div元素同样没有使用任何指令。

JavaScript逻辑部分 `<script setup>`

这部分是空的，因为所有的逻辑都在自定义指令中定义了。

样式部分 `<style lang="less" scoped>`

这部分也是空的，但是指定了使用LESS作为样式语言，并且样式是作用域化的，意味着它们只会应用到当前组件。

自定义指令 `v-copy`

自定义指令v-copy定义在JavaScript代码中，它包含三个生命周期钩子：mounted、updated和beforeUnmount。

mounted(el, binding)：当元素被挂载到DOM上时，这个钩子会被调用。在这里，它创建了一个复制函数copyFn，这个函数会在用户点击元素时被触发。复制函数会根据是否提供了binding.value（即v-copy指令的值）来决定复制的内容，如果没有提供，则复制元素的文本内容。然后，它创建一个临时的textarea元素，将内容复制到其中，选中文本，并尝试使用document.execCommand('copy')复制到剪切板。最后，它会移除临时的textarea元素，并根据复制是否成功弹出相应的提示。
updated(el, binding)：当元素的绑定更新时，这个钩子会被调用。在这个例子中，它没有实现任何功能，但是可以根据需要在这里更新指令的行为。
beforeUnmount(el)：在元素被卸载之前，这个钩子会被调用。在这里，它移除了之前绑定的点击事件监听器，以防止内存泄漏。

使用

<template>
  <div>
    <div v-copy>1231231</div>
    <div>445</div>
    <div v-copy="'此处复制'">122727388</div>
    <div>888</div>
    <!-- <div v-resize="resizeWin">129391239</div> -->
  </div>
</template>

<script setup></script>

<style lang="less" scoped></style>

代码

/* 点击复制指令 */
  app.directive('copy', {
    // 使用 `mounted` 替代 `bind`
    mounted(el, binding) {
        // 创建复制函数
        el.copyFn = () => {
            console.log('点击的是哪个DOM', el);
            
            // 获取自定义内容，如果没有指定，则默认复制元素的文本内容
            const contentToCopy = binding.value || el.innerText;

            // 创建一个隐藏的文本区域来复制内容
            const textarea = document.createElement('textarea');
            textarea.value = contentToCopy;
            document.body.appendChild(textarea);
            textarea.select();

            // 复制内容到剪切板
            try {
                const successful = document.execCommand('copy');
                const msg = successful ? '复制成功，可以粘贴啦' : '复制失败';
                alert(msg);
            } catch (err) {
                console.error('复制失败', err);
                alert('当前浏览器不支持一键复制功能，请手动复制粘贴');
            }

            document.body.removeChild(textarea);
        };

        // 绑定点击事件
        el.addEventListener('click', el.copyFn);
    },
    
    // 使用 `updated` 替代 `componentUpdated`
    updated(el, binding) {
        // 可以根据需要更新指令的行为
    },

    // 使用 `beforeUnmount` 替代 `unbind`
    beforeUnmount(el) {
        // 移除点击事件
        el.removeEventListener('click', el.copyFn);
    }
  });