uniapp H5端 点击按钮复制微信号
时间: 2023-08-04 19:09:33 浏览: 107
在uniapp的H5端中,您可以使用以下代码实现点击按钮复制微信号的功能:
在template中添加一个按钮:
```
<template>
<button @click="copyWechat">复制微信号</button>
</template>
```
在methods中添加copyWechat函数:
```
methods: {
copyWechat() {
const input = document.createElement('input')
input.setAttribute('readonly', 'readonly')
input.setAttribute('value', '微信号')
document.body.appendChild(input)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
uni.showToast({
title: '微信号已复制',
icon: 'none'
})
}
}
```
需要注意的是,H5端不能直接调用uni.setClipboardData方法,因此我们可以动态创建一个input元素,将需要复制的文本内容设置到input的value属性中,然后手动选中input元素的内容,并执行document.execCommand('copy')方法进行复制。最后,记得将动态创建的input元素从DOM中移除。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![vue](https://img-home.csdnimg.cn/images/20250102104920.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![vue](https://img-home.csdnimg.cn/images/20250102104920.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)