技术栈：uniapp的vue3+vite2+ts版本
前言：思路是创建一个图标，引用，然后在父组件中调用该子组件的方法，核心是setCopy()里的内容（也可以把里面内容提取成hooks使用，我的需求是通过图标复制所以如此做），由于测试了uni.setClipboardData()实际上不兼容H5，会报“复制失败请重新复制”的提示，所以添加代码使其兼容H5

一、创建组件

我是在/components/clip/index.vue该路径下进行创建，可自行发挥

<template>
    <u-icon name="copy" custom-prefix="custom-icon" size="35"></u-icon>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'

// 此方法最好放在点击事件中
const setCopy = (content: string) => {
    // 使用#ifdef H5和#endif控制各端调用情况

    // 该方法不支持h5
    //#ifndef H5
    uni.setClipboardData({
        data: String(content), // 必须字符串
        success: function () {
            console.log('success');
        }
    });
    //#endif

    // h5端赋值方法，使用创建节点
    // #ifdef H5
    if (!document.queryCommandSupported('copy')) { // 兼容某些浏览器的判断
        console.log('该浏览器不支持')
    }
    let textarea = document.createElement("textarea") as any
    textarea.value = content
    textarea.readOnly = "readOnly"
    document.body.appendChild(textarea)
    textarea.select() // 选择对象
    textarea.setSelectionRange(0, content.length) // 核心
    let result = document.execCommand("copy") // 执行浏览器复制命令
    if (result) {
        uni.showToast({
            title: '复制成功',
            duration: 2000
        });
    }
    textarea.remove()
    // #endif
}

// 暴露方法给父组件
defineExpose({ setCopy })
</script>

<style lang='scss' scoped>@import "./iconfont.css";</style>

二、调用组件及其方法

<template>
	<!-- 先使用@click，若不成功改用@tap，因为微信小程序中可能不生效 -->
	<clip @tap="handleClickCopy('888888')" ref="clipIcon"></clip>
</template>

<script setup lang="ts">
import { ref, reactive, Ref } from "vue";
import clip from '@/components/clip/index.vue'

// vue3通过ref获取，等同于vue2的refs方法，若有需要自行改写
const clipIcon: Ref<any> = ref(null)
const handleClickCopy = (data: string) => {
	clipIcon.value.setCopy(data)
}
</script>

三、多端调用的效果展示

复制成功后直接用手机的粘贴或者电脑的粘贴即可

四、参考链接地址

1、官方参考文档：https://uniapp.dcloud.net.cn/api/system/clipboard.html#getclipboarddata
2、H5端兼容代码参考文档：https://blogs.kongjz.com/details/44

五、补充：样式穿透在微信小程序端不生效的解决方案

使用样式穿透后，H5端生效，微信小程序端不生效，需要在进行样式穿透的页面添加如下代码，因为我是用<script setup lang="ts"></script>，所以需要另起一行添加如下代码，如果不使用setup语法糖或者vue2的开发，只需要在顶层添加即可，可以参考该文档：https://blog.csdn.net/lingliu0824/article/details/123178465

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    // 在小程序中穿透，不支持setup语法糖了
    options: { styleIsolation: 'shared' },
})
</script>

<script setup lang="ts">...<script>