uni APP端和 H5端复制

最新推荐文章于 2025-02-07 16:03:48 发布

原创最新推荐文章于 2025-02-07 16:03:48 发布 · 777 阅读

1 ·

CC 4.0 BY-SA版权

uniapp 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在uniAPP和H5端实现文本复制功能。在APP端，文章详细讲解了实现过程；而在H5端，通过引入vue-clipboard2插件并在main.js配置，以及页面中具体使用方法，实现了便捷的复制操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP 端复制：

<!-- #ifdef APP-PLUS -->
	<button type="default" @click="copy">复制链接</button>
<!-- #endif -->


<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
            // #ifdef APP-PLUS
			copy() {
				uni.setClipboardData({
					data: this.val,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: "none",
							duration: 1000
						})
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: "none",
							duration: 1000
						})
					}
				});
		
			}
		// #endif
		}
	}
</script>

H5 端：

安装 vue-clipboard2 插件:

npm install vue-clipboard2 --save

main.js 中引入：


import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard);

页面中：

<!-- #ifdef H5 -->
	<text
		class="item-btn"
		v-clipboard:copy="val"
		v-clipboard:success="(type) => onCopyResult('success')"
		v-clipboard:error="(type) => onCopyResult('error')">复制链接
	</text>
<!-- #endif -->


<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			// #ifdef H5
			onCopyResult(type){
				if (type==='success') {
					uni.showToast({
						title: '复制成功',
						icon: "none",
						duration: 1000
					})
				} else {
					uni.showToast({
						title: '复制失败',
						icon: "none",
						duration: 1000
					})
				}
			}
			// #endif
		}
	}
</script>