vue.js单击全选文字并将文字复制到剪贴板

一、安装插件

npm install vue-clipboard2 --save

二、全局注入（main.js）

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

三、使用
单击span文字就可以选中span标签的文字，并且复制到剪贴板

template代码

 <el-table>
 <el-table-column 
        prop="name" 
        label="名字" 
        align="center" 
        width="400px"
        >
         <template slot-scope="scope"  >
          <span  
          v-clipboard:copy="scope.row.name"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          >{{scope.row.name}}</span>
        </template>
        </el-table-column>
 <el-table>

script代码

 onCopy(e) {
      //全选文字
        if  (document.body.createTextRange)  {
                // IE兼容
                var range = document.body.createTextRange();
                range.moveToElementText(e.target);
                range.select();
            } else {
                let selection = window.getSelection();
                let range = document.createRange();
                range.selectNodeContents(e.trigger);
                selection.removeAllRanges();
                selection.addRange(range);
            }
      this.$message.success("复制成功");
    },
    onError() {
      this.$message.console.error("复制失败");
    }
  }