vuejs如何实现复制粘贴功能

vuejs如何实现复制粘贴功能，下面web建站小编给大家详细介绍一下实现代码！

新建copy.js的文件

const vCopy = {
  bind(el, { value }) {
    el.$value = value;
    el.handler = () => {
      if (!el.$value) {
       console.log('无复制内容');
        return;
      }
      const textarea = document.createElement('textarea');
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';

      textarea.value = el.$value;
      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);
    };

    el.addEventListener('click', el.handler);
  },

  componentUpdated(el, { value }) {
    el.$value = value;
  },

  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};
export default vCopy;

新建directives.js文件

import copy from './copy.js';

// 自定义指令
const directives = {
  copy,
};

export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};

main.js全局引入

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

页面调用

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