refactor:TTable双击单元格复制功能弃用vue-clipboard2插件

Author: wocwin

docs/.vuepress/enhanceApp.js

@@ -7,7 +7,6 @@ import ElementUI from 'element-ui'
 // import Tui from '../../src/components/baseComponents/index.js'
 import Tui from '../../packages'
 import { message } from './public/utils/resetMessage' // 防止重复点击重复弹出message弹框
-import vueClipboard from 'vue-clipboard2'
 // import * as filters from './public/utils/filters' // global filters
 import './public/utils/directives' // 自定义指令
 import 'element-ui/lib/theme-chalk/index.css'
@@ -23,7 +22,6 @@ export default ({
   Vue.use(VueHighlightJS),
     Vue.use(ElementUI),
     Vue.use(Tui),
-    Vue.use(vueClipboard),
     Vue.prototype.$messageUpload = message,
     Vue.prototype.$message = ElementUI.Message,
     Vue.prototype.$loading = ElementUI.Loading.service,

examples/main.js

@@ -13,7 +13,6 @@ import '@/directive'
 import * as filters from './utils/filters' // global filters
 import { message } from './utils/resetMessage' // 防止重复点击重复弹出message弹框
 import api from '@/api' // 接口api
-import VueClipboard from 'vue-clipboard2' // 复制插件
 // import { Message } from 'element-ui'
 
 import Tui from '../packages' // 二次封装组件
@@ -24,7 +23,6 @@ Vue.use(vueSeamlessScroll)
 Vue.use(Element)
 Vue.use(Tui)
 
-Vue.use(VueClipboard)
 
 Vue.prototype.$http = api
 Vue.prototype.$messageUpload = message

packages/table/src/index.vue

@@ -1263,6 +1263,20 @@ export default {
         </div>
       )
     },
+    // 复制内容
+    copyDomText(val) {
+      // 获取需要复制的元素以及元素内的文本内容
+      const text = val
+      // 添加一个input元素放置需要的文本内容
+      const input = document.createElement('input')
+      input.value = text
+      document.body.appendChild(input)
+      // 选中并复制文本到剪切板
+      input.select()
+      document.execCommand('copy')
+      // 移除input元素
+      document.body.removeChild(input)
+    },
     // 双击复制单元格内容
     cellDblclick(row, column) {
       if (!this.isCopy) {
@@ -1276,14 +1290,12 @@ export default {
       } else {
         label = row[column.property]
       }
-      this.$copyText(label).then(
-        () => {
-          this.$message.success('已复制')
-        },
-        () => {
-          this.$message.error('复制失败')
-        }
-      )
+      try {
+        this.copyDomText(label)
+        this.$message.success('已复制')
+      } catch (e) {
+        this.$message.error('复制失败')
+      }
     },
     // 是否显示表格操作按钮
     checkIsShow(scope, item) {