Vue自定义指令 v-copy

ai酸的博文

已于 2022-08-31 11:11:21 修改

阅读量302

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-08-31 10:58:34 首次发布

本文链接：https://blog.csdn.net/weixin_44173943/article/details/126619595

版权

Vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

原理

创建textarea元素
将要复制的值传入textarea的value中
将textarea加入DOM树
选中textarea
将当前选中区复制到剪贴板

代码

<!--
 * @Author: Boen
 * @Date: 2022-08-31 10:22:07
 * @LastEditTime: 2022-08-31 10:54:22
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      要复制的内容：
      <h1>{{message}}</h1>
      <button v-copy="message">点击复制</button>
    </div>

    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          message: "999感冒灵",
        },
        directives: {
          copy: {
            // 指令第一次绑定到元素时
            bind(el, { value }) {
              // 初始化要复制的内容
              el.$value = value;

              // 初始化点击事件
              el.handle = () => {
                // 创建textarea
                const textarea = document.createElement("textarea");
                // 为textarea的value赋值
                textarea.value = el.$value;
                // 防止ios唤起键盘
                textarea.readOnly = "true";
                // 将textarea移出可视区
                textarea.style.position = "absolute";
                textarea.style.left = "-9999px";
                // 添加DOM元素
                document.body.appendChild(textarea);
                // 选中textarea的文本
                textarea.select();
                // 将当前选中区复制到剪贴板
                document.execCommand("Copy");
                // 移出DOM元素
                document.body.removeChild(textarea);
              };

              // btn添加监听事件
              el.addEventListener("click", el.handle);
            },
            //  VNode 及其子 VNode 全部更新后调用
            componentUpdated(el, { value }) {
              // 更新value
              el.$value = value;
            },
            // 指令与元素解绑时调用
            unbind(el) {
              // 解绑点击事件
              el.removeEventListener("click", el.handle);
            },
          },
        },
      });
    </script>
  </body>
</html>