新增复制自定义指令

admin/src/install/directives/copy.ts

@@ -0,0 +1,28 @@
+/**
+ * perm 操作权限处理
+ * 指令用法：
+ *  <el-button v-perms="['auth.menu/edit']">编辑</el-button>
+ */
+
+import feedback from '@/utils/feedback'
+import useClipboard from 'vue-clipboard3'
+const clipboard = 'data-clipboard-text'
+export default {
+    mounted: (el: HTMLElement, binding: any) => {
+        el.setAttribute(clipboard, binding.value)
+        const { toClipboard } = useClipboard()
+
+        el.onclick = () => {
+            toClipboard(el.getAttribute(clipboard)!)
+                .then(() => {
+                    feedback.msgSuccess('复制成功')
+                })
+                .catch(() => {
+                    feedback.msgError('复制失败')
+                })
+        }
+    },
+    updated: (el: HTMLElement, binding: any) => {
+        el.setAttribute(clipboard, binding.value)
+    }
+}

admin/src/views/channel/h5.vue

@@ -27,7 +27,7 @@
                 </el-form-item>
                 <el-form-item label="访问链接">
                     <div>{{ formData.accessLink }}</div>
-                    <el-button class="ml-4" @click="copy(formData.accessLink)">复制</el-button>
+                    <el-button class="ml-4" v-copy="formData.accessLink">复制</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
@@ -39,7 +39,6 @@
 <script lang="ts" setup>
 import { getH5Config, setH5Config } from '@/api/channel/h5'
 import feedback from '@/utils/feedback'
-import { useClipboard } from '@vueuse/core'
 
 const formData = reactive({
     status: 0,
@@ -48,7 +47,7 @@ const formData = reactive({
     accessLink: ''
 })
 
-const { copy } = useClipboard()
+// const { copy } = useClipboard()
 const getDetail = async () => {
     const data = await getH5Config()
     for (const key in formData) {