技术栈: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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐