一键复制自定义指令

使用vue的全局自定义指令封装一键复制功能

保存在 vue.directive.js 文件中

import Vue from 'vue'
let copyText = '';
//自定义指令复制
Vue.directive('copyText', {
  // 当被绑定的元素插入到 DOM 中时
  inserted (el,binding){
       
    el.addEventListener('click', function version(params) {
      let selectTxt = window.getSelection();
      if(selectTxt.rangeCount > 0){
        selectTxt.removeAllRanges();
        let range = document.createRange();
        range.selectNode(el);
        selectTxt.addRange(range);
      }
​
      if(selectTxt.toString().length > 0 ){
        try {
            // 执行复制操作
            let successful = document.execCommand('copy');
            if(!successful){
                console.error('复制文本失败!');    
            }
        }catch(err){
          console.log('不支持复制功能');
        }
      }
      selectTxt.removeAllRanges();
    });
  },
})
​

使用

<template>
  <div>
    <div v-copyText>复制我</div>
  </div>
</template>
​
<script>
  import  vueDirective  from './js/vue.directive.js'
  export default {
    directives: {
      copyText:vueDirective.copyText
    },
    created() {
    }
  }
</script>
​