Uniapp 实现view复制文本内容, 以及textarea层级太高，导致样式穿透问题

本文链接：https://blog.csdn.net/qq_37767455/article/details/118049553

在这里插入图片描述
1、data里面声明replacedContent属性：
2、页面加载时，对(textarea)content字段中换行、回车、空格的识别与处理：

mounted() {
		let loginInfo = uni.getStorageSync('loginInfo');
		// console.log("index.vue --> getTeamDailyList 同步读取缓存：");
		// console.log(loginInfo);
		this.deptId = loginInfo.deptId;  //当前登录用户的部门id
		this.roleName = loginInfo.roleName;
		this.currentUserId = loginInfo.f_user_id;
		
		let replacedContent = this.reportData.content.replace(/\n/g, '_@').replace(/\r/g, '_#');
		replacedContent = replacedContent.replace(/_#_@/g, '<br/>'); // IE7-8
		replacedContent = replacedContent.replace(/_@/g, '<br/>'); // IE9、FF、chrome
		replacedContent = replacedContent.replace(/\s/g, '&nbsp;'); // 空格处理

		//let replacedContent = this.reportData.content.replace('\n', '<br>');
		this.replacedContent = replacedContent;
		
	},

3、复制内容：

getDetail(copyInfo){
	let reg = /<[^<>]+>/g;//1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
	//info = info.replace(reg, '');//替换HTML标签
	copyInfo  = copyInfo.replace(/<br\/>/g, "\n");
	copyInfo = copyInfo.replace(/&nbsp;/ig, '');//替换HTML空格
	uni.showModal({
		content: copyInfo,//模板中提示的内容
		confirmText:'复制内容',
		success:(res) => {//点击复制内容的后调函数
			if(res.confirm) {
				
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: copyInfo,//要被复制的内容
					success:() => {//复制成功的回调函数
						uni.showToast({//提示
							title:'复制成功' 
						})
					}
				});
			
			
			} else {
				console.log('取消')
			}
		}
	});

},