侧边栏壁纸
  • 累计撰写 2,058 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录

UniApp按钮点击实现复制文本内容

大猿本猿
2023-02-20 / 4,486 阅读 / 242 字
" "

需求描述

在UniApp中通过点击一个按钮实现复制某段文本的内容。

实现方法

使用uni.setClipboardData实现

image

利用 uniapp 提供的 api setClipboardData​,但是这个 api 兼容 APP 端,不兼容 H5 端,那么我们还需要对 H5 端进行处理;

点击复制按钮,实现复制downUrl.url,代码如下:

view:

<view class="down">
            <p style="color:cornflowerblue;">{{downUrl.url}}</p>
</view>
<view><button @click="copy">点击按钮复制</button></view>

js:

    copy() {
                let result
                // #ifndef H5
                //uni.setClipboardData方法就是讲内容复制到粘贴板
                uni.setClipboardData({
                    data: this.downUrl.url, //要被复制的内容
                    success: () => { //复制成功的回调函数
                        uni.showToast({ //提示
                            title: '复制成功'
                        })
                    }
                });
                // #endif

                // #ifdef H5 
                let textarea = document.createElement("textarea")
                textarea.value = this.downUrl.url
                textarea.readOnly = "readOnly"
                document.body.appendChild(textarea)
                textarea.select() // 选中文本内容
                textarea.setSelectionRange(0, info.length)
                uni.showToast({ //提示
                    title: '复制成功'
                })
                result = document.execCommand("copy")
                textarea.remove()
                // #endif
            }