最好用的复制按钮,页面文字复制,uniapp文字复制,vue文字复制。

本文介绍了一种在uniApp中实现复制功能的方法,通过自定义复制组件的方式,使得页面上的文字能够被轻松复制。该方法适用于多种场景,包括但不限于复制链接、文案等。

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

最好用的复制按钮,页面文字复制,uniapp复制,vue复制。

效果图
在这里插入图片描述

话不多说直接上代码
html代码

	<!-- 复制组件 -->
		<view class="" style="width: 800rpx;height: 800rpx;background: #ffffff;margin-top: 100rpx;">
			<span>{{val}}</span>
			<copywrittenwords ref='copywrittenwords' :mes="val"></copywrittenwords>
		</view>

js代码

import copywrittenwords from "@/components/copywrittenwords.vue"  //引用组件
	export default {
		data() {
			return {
				val: 'www.baidu.com55777'  //定义变量
			}
		},
		components: {
			// 注册组件
			copywrittenwords
		},

组件代码

<template>
	<view @click="fun()">
		复制
	</view>
</template>

<script>
	export default {
		name:"copywrittenwords",
		props:['mes'],
		data() {
			return {
				// val: 'www.baidu.com222'
				val: ''
			};
		},
		methods:{
			fun() {		//复制事件
			console.log(555)
			console.log(this.mes)
				// var content1 = this.val   //要复制的值
				var content1 = this.mes   //要复制的值
				var tips ="复制成功"    //复制成功提示语
				var ele = document.createElement("input"); //创建一个input标签
				ele.setAttribute("value", content1); // 设置改input的value值
				document.body.appendChild(ele); // 将input添加到body
				ele.select();// 获取input的文本内容
				document.execCommand("copy");// 执行copy指令
				document.body.removeChild(ele);// 删除input标签
				uni.showToast({    // 显示复制成功之后的提示文本
					title: '复制成功',
					icon:'none',
					duration: 2000
				});
			},
		}
	}
</script>

<style>

</style>

看完记得点赞加关注哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值