使用vueuse实现在dialog中copy功能

src/views/tool/file/index.vue

@@ -173,9 +173,9 @@
           <el-col :lg="24">
             <el-form-item label="访问路径">
               {{ formView.accessUrl }}
-              <!-- <el-button class="copy-btn-main" icon="document-copy" text @click="copyText(formView.accessUrl)">
+              <el-button class="copy-btn-main" icon="document-copy" text @click="copyText(formView.accessUrl)">
                 {{ $t('btn.copy') }}
-              </el-button> -->
+              </el-button>
             </el-form-item>
           </el-col>
           <el-col :lg="24">
@@ -188,7 +188,7 @@
 </template>
 <script setup name="sysfile">
 import { listSysfile, delSysfile, getSysfile } from '@/api/tool/file.js'
-import useClipboard from 'vue-clipboard3'
+import { useClipboard } from '@vueuse/core'
 // 选中id数组
 const ids = ref([])
 // 非单个禁用
@@ -346,12 +346,15 @@ function submitUpload() {
   }
   proxy.$refs.uploadRef.submitUpload()
 }
-const { toClipboard } = useClipboard()
+
+const { copy, isSupported } = useClipboard()
 const copyText = async (val) => {
-  try {
+  if (isSupported) {
-    await toClipboard(val)
+    copy(val)
-    proxy.$message.success('复制成功！')
+    proxy.$modal.msgSuccess('复制成功！')
-  } catch (e) {}
+  } else {
+    proxy.$modal.msgError('当前浏览器不支持')
+  }
 }
 handleQuery()
 </script>

src/views/tool/gen/index.vue

@@ -62,9 +62,7 @@
     <el-dialog :title="preview.title" v-model="preview.open" width="80%" top="5vh" append-to-body>
       <el-tabs v-model="preview.activeName">
         <el-tab-pane v-for="(item, key) in preview.data" :label="item.title" :id="key" :name="key.toString()" :key="key">
-          <!-- <el-link :underline="false" icon="DocumentCopy" v-copyText="item.content" class="btn-copy"
+          <el-link :underline="false" icon="DocumentCopy" @click="onCopy(item.content)" class="btn-copy">复制 </el-link>
-            >复制
-          </el-link> -->
           <pre><code class="hljs" v-html="highlightedCode(item.content, item.title)"></code></pre>
         </el-tab-pane>
       </el-tabs>
@@ -79,7 +77,7 @@ import { useRouter } from 'vue-router'
 import importTable from './importTable'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/dark.css' // 这里有多个样式，自己可以根据需要切换
-
+import { useClipboard } from '@vueuse/core'
 // const route = useRoute()
 const router = useRouter()
 const { proxy } = getCurrentInstance()
@@ -241,9 +239,15 @@ function highlightedCode(code, key) {
   const result = hljs.highlightAuto(code || '')
   return result.value || '&nbsp;'
 }
-/** 复制代码成功 */
+
-function clipboardSuccess() {
+const { copy, isSupported } = useClipboard()
-  proxy.$modal.msgSuccess('复制成功')
+function onCopy(input) {
+  if (isSupported) {
+    copy(input)
+    proxy.$modal.msgSuccess('复制成功！')
+  } else {
+    proxy.$modal.msgError('当前浏览器不支持')
+  }
 }
 getList()
 </script>