uniapp点击复制
时间: 2025-01-11 07:45:08 浏览: 86
### 实现点击复制功能
为了实现在 UniApp 中点击元素后自动复制文本的功能,可以利用 `data-clipboard-action` 属性来指定复制操作的类型为 "copy"[^1]。具体来说,在 HTML 元素上设置此属性,并结合 JavaScript 来触发剪贴板 API 的调用。
下面是一个简单的例子:
```html
<template>
<view class="container">
<!-- 定义一个可点击区域 -->
<button type="default" data-clipboard-text="要复制的内容" @click="handleCopy">点击这里复制</button>
<text>{{ message }}</text> <!-- 显示提示信息 -->
</view>
</template>
<script>
export default {
data() {
return {
message: ''
};
},
methods: {
handleCopy(event) {
const textToCopy = event.currentTarget.dataset.clipboardText;
uni.setClipboardData({
data: textToCopy,
success(res) {
this.message = '已成功复制';
}
});
}
}
}
</script>
```
这段代码展示了如何创建一个按钮,当用户点击它时会触发 `handleCopy()` 方法,进而调用 `uni.setClipboardData()` 函数完成复制动作并给出反馈消息。
阅读全文
相关推荐


















