美文网首页
vue.js实现一键copy功能

vue.js实现一键copy功能

作者: blank的小粉er | 来源:发表于2021-01-20 16:07 被阅读0次

    1首先建一个copyComm.js的文件

    const vCopy = { 
      /*
        bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
        el: 作用的 dom 对象
        value: 传给指令的值,也就是我们要 copy 的值
      */
      bind(el, { value }) {
        el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
        el.handler = () => {
          if (!el.$value) {
            // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意
           console.log('无复制内容');
            return;
          }
          // 动态创建 textarea 标签
          const textarea = document.createElement('textarea');
          // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
          textarea.readOnly = 'readonly';
          textarea.style.position = 'absolute';
          textarea.style.left = '-9999px';
          // 将要 copy 的值赋给 textarea 标签的 value 属性
          textarea.value = el.$value;
          // 将 textarea 插入到 body 中
          document.body.appendChild(textarea);
          // 选中值并复制
          textarea.select();
          textarea.setSelectionRange(0, textarea.value.length);
          const result = document.execCommand('Copy');
          if (result) {
            console.log('复制成功');
          }
          document.body.removeChild(textarea);
        };
        // 绑定点击事件,就是所谓的一键 copy 啦
        el.addEventListener('click', el.handler);
      },
      // 当传进来的值更新的时候触发
      componentUpdated(el, { value }) {
        el.$value = value;
      },
      // 指令与元素解绑的时候,移除事件绑定
      unbind(el) {
        el.removeEventListener('click', el.handler);
      },
    };
    export default vCopy;
    

    2.在建一个directives.js文件来注册所有的全局指令

    import copy from './copyComm.js';
    // 自定义指令
    const directives = {
      copy,
    };
    // 这种写法可以批量注册指令
    export default {
      install(Vue) {
        Object.keys(directives).forEach((key) => {
          Vue.directive(key, directives[key]);
        });
      },
    };
    

    3.在main.js引入

    import Vue from 'vue';
    import Directives from './directives';
    
    Vue.use(Directives);
    

    4.在vue中使用

    <template>
      <div >
        <button v-copy="copyText">拷贝</button>
      </div>
    </template>
    
    <script>
      export default {
        data(){
          return {
            copyText:'要copy的内容'
          }
        },
      }
    </script>
    

    5.原文地址https://blog.csdn.net/qq_43427385/article/details/100891501

    相关文章

      网友评论

          本文标题:vue.js实现一键copy功能

          本文链接:https://www.haomeiwen.com/subject/dwmkzktx.html