uniapp实现复制功能
前言:思路是创建一个图标,引用,然后在父组件中调用该子组件的方法,核心是setCopy()里的内容(也可以把里面内容提取成hooks使用,我的需求是通过图标复制所以如此做),由于测试了uni.setClipboardData()实际上不兼容H5,会报“复制失败请重新复制”的提示,所以添加代码使其兼容H5...
技术栈: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>
更多推荐
所有评论(0)