复制组件

src/components/copy-text/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="copy" v-if="$slots.default || text">
+    <slot/>{{text}}
+    <i @click="copyText" title="复制" class="el-icon-document-copy"></i>
+  </span>
+</template>
+
+<script>
+import copy from 'copy-to-clipboard'
+
+export default {
+  name: 'copy-text',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    hint: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created() {
+    console.log(this)
+  },
+  methods: {
+    copyText() {
+      const slot = this.$slots.default || []
+      const text = slot[0]?.text || this.text
+      if (text) {
+        copy(text)
+        if (this.hint) {
+          this.$message.success('复制成功')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.copy{
+  .el-icon-document-copy{
+    cursor: pointer;
+  }
+}
+</style>

src/components/install.js

@@ -6,11 +6,13 @@
 import saveform from '@/components/save-form'
 import overflowtext from '@/components/overflow-text'
 import selectall from '@/components/select-all'
+import copytext from '@/components/copy-text'
 
 export default {
   install(Vue) {
     Vue.component(saveform.name, saveform)
     Vue.component(overflowtext.name, overflowtext)
     Vue.component(selectall.name, selectall)
+    Vue.component(copytext.name, copytext)
   }
 }

src/views/save-form-test/index.vue

@@ -66,7 +66,11 @@
       <el-table-column
         prop="title"
         label="标题"
-      ></el-table-column>
+      >
+        <template slot-scope="scope">
+          <copy-text>{{scope.row.title}}</copy-text>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="remark"
         width="220px"