uniapp实现复制功能

技术栈：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 H5uni.setClipboardData({data: String(content), // 必须字符串success: function () {console.log('success');}});//#endif// h5端赋值方法，使用创建节点// #ifdef H5if (!document.queryCommandSupported('copy')) { // 兼容某些浏览器的判断console.log('该浏览器不支持')}let textarea = document.createElement("textarea") as anytextarea.value = contenttextarea.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>