uniapp:微信小程序文本长按无法出现复制菜单

一、问题描述

在集成腾讯TUI后,为了能让聊天文本可以复制,对消息组件的样式进行修改,主要是移除下面的user-select属性限制:

复制代码
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

在Android设备上可以正常显示长按的复制菜单,但在IOS上无法正常显示。

二、解决方案

在微信开发文档中找到:

同时在uniapp上也找到相关文档:

但实际在uniapp中使用span标签编译出来的是label标签:

因此,将span改成text即可:

html 复制代码
<div>
	<text
	  class="text"
		:user-select="true"
	>{{ item.text }}</text>
</div>

经过编译后确认是text组件:

最终效果:

相关推荐
happyCoder1 小时前
uniapp 微信小程序实现定时消息订阅提醒(前后端)
微信小程序
Bug从此不上门2 小时前
【无标题】
前端·javascript·uni-app·vue
耶啵奶膘5 小时前
uniapp+vue2解构赋值和直接赋值的优缺点
uni-app
疯狂的沙粒6 小时前
uni-app 项目支持 vue 3.0 详解及版本升级方案?
前端·vue.js·uni-app
Jiaberrr6 小时前
uniapp Vue2 获取电量的独家方法:绕过官方插件限制
前端·javascript·uni-app·plus·电量
^Rocky7 小时前
uniapp 对接腾讯云IM群公告功能
uni-app·腾讯云
段旭涛7 小时前
uniapp 设置手机不息屏
前端·uni-app
疯狂的沙粒10 小时前
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
前端·uni-app·html
Uyker11 小时前
从零开始制作小程序简单概述
前端·微信小程序·小程序
打小就很皮...18 小时前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序