towxml icon indicating copy to clipboard operation
towxml copied to clipboard

添加了微信复制功能,在decode.wxml中使用<text user-select selectable>{{item.text}}</text>拉起复制功能后,加粗的文本会换行的问题

Open xuyuanwei678 opened this issue 1 year ago • 10 comments

6a385147359a424424cc2b798e3e41dd 用text标签包裹了item.text,text与text之间换行了。使用span就不会出现这个问题。使用text包裹是为了调起微信复制按钮。 md如下 当然可以,以下是加粗后的每日必做List:↵↵1. 早起:保持良好的作息,养成早睡早起的习惯。↵2. 早餐:吃一顿营养丰富的早餐,为新的一天补充能量。↵3. 锻炼:每天坚持锻炼,增强体质,可选择跑步、游泳、健身等。↵4. 专注学习:制定学习计划,确保每天有固定的学习时间,提高学习效率。↵5. 休息:合理安排休息时间,避免过度劳累,可以进行短暂的午休。↵6. 社交:与同学、朋友保持良好沟通,拓展人际关系。↵7. 兴趣爱好:培养个人兴趣爱好,如阅读、绘画、音乐等,丰富课余生活。↵8. 自我反思:每天花点时间进行自我反思,总结经验教训,不断成长。↵9. 规律作息:保持良好的作息习惯,确保每天有足够的睡眠时间。↵10. **保持乐观:保持积极乐观的心态,面对挑战时保持冷静,勇敢面对。↵↵希望这样的格式能够帮助你更好地关注每日的重点任务!

xuyuanwei678 avatar May 17 '24 06:05 xuyuanwei678

以文本文件的形式贴上需要解析的内容。

sbfkcel avatar May 18 '24 11:05 sbfkcel

小程序text添加user-select后,会将text改为block,并且无法改回inline

kunkkaliu avatar Jun 20 '24 03:06 kunkkaliu

我把decode.wxml中的{{item.text}}部分改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" />,并在decode.json中引入微信官方的select-text组件"select-text": "./select-text/index"解决了这个选中复制功能,并且不会产生换行问题。

chenqiuling avatar Aug 15 '24 07:08 chenqiuling

我使用了chenqiuling这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 1.获取select-text组件的源代码:随便找一个前端项目,在终端中执行npm install @miniprogram-component-plus/select-text,从nodes_module中找到下面组件 image 2.然后复制miniprogram_dist文件,粘贴到towxml目录下,miniprogram_dist重命名为select-text image 3.去decode.wxml中将{{item.text}}改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" /> 4.在decode.json中添加"select-text": "./select-text" image

zhouzxx avatar Aug 17 '24 18:08 zhouzxx

我使用了chenqiuling这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 1.获取select-text组件的源代码:随便找一个前端项目,在终端中执行npm install @miniprogram-component-plus/select-text,从nodes_module中找到下面组件 image 2.然后复制miniprogram_dist文件,粘贴到towxml目录下,miniprogram_dist重命名为select-text image 3.去decode.wxml中将{{item.text}}改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" /> 4.在decode.json中添加"select-text": "./select-text" image

这样做格式还是会乱掉啊,你们真的没问题吗

Mageenz avatar Oct 21 '24 03:10 Mageenz

我使用了chenqiuling这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 1.获取select-text组件的源代码:随便找一个前端项目,在终端中执行npm install @miniprogram-component-plus/select-text,从nodes_module中找到下面组件 image 2.然后复制miniprogram_dist文件,粘贴到towxml目录下,miniprogram_dist重命名为select-text image 3.去decode.wxml中将{{item.text}}改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" /> 4.在decode.json中添加"select-text": "./select-text" image

这样做格式还是会乱掉啊,你们真的没问题吗

目前我这边使用没有换行问题,但是有个iOS机型复制不了,大概是因为selectable属性被废弃了,安卓和其他iOS机型目前可以使用。其实select-text内封装的text组件用的是已经废弃的selectable属性,所以可以表现为inline行内。text组件新的user-select属性会表现为inline-block,会导致换行。

chenqiuling avatar Oct 28 '24 01:10 chenqiuling

我使用了chenqiuling这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 1.获取select-text组件的源代码:随便找一个前端项目,在终端中执行npm install @miniprogram-component-plus/select-text,从nodes_module中找到下面组件 image 2.然后复制miniprogram_dist文件,粘贴到towxml目录下,miniprogram_dist重命名为select-text image 3.去decode.wxml中将{{item.text}}改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" /> 4.在decode.json中添加"select-text": "./select-text" image

这样做格式还是会乱掉啊,你们真的没问题吗

目前我这边使用没有换行问题,但是有个iOS机型复制不了,大概是因为selectable属性被废弃了,安卓和其他iOS机型目前可以使用。其实select-text内封装的text组件用的是已经废弃的selectable属性,所以可以表现为inline行内。text组件新的user-select属性会表现为inline-block,会导致换行。

后面我发现了,忘记说了,其实是有问题的,细看select-text的代码,就发现它的核心就把text标签包装一下,然后设置selectable=“true”,这样就可以在安卓手机上复制了,但是对苹果手机无效,你得加个user-select="true",才能让苹果手机能复制。但是user-select="true"有个副作用,即它会把text的高度设置为一行文本的高度,即使你在视觉上看起来文本高度正常,但是你如果调试的话,就会发现文本的高度就只是一行。然后就会导致引用(md中用单引号 `` 表示的),除了最后一行,前几行的样式失效,同时不排除这个高度一行会影响到其他的样式。总之,我现在的结论就是苹果手机复制和样式副作用二选一,要么苹果手机能复制,苹果安卓样式都受影响,要么苹果手机不复制,安卓手机苹果手机样式都不受影响,但是安卓手机仍然能复制。目前我没找到其他的办法,因为复制就是通过text标签上加这两个css属性,除非你自己添加事件,通过js绕一圈去实现

zhouzxx avatar Oct 28 '24 02:10 zhouzxx

我使用了chenqiuling这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 1.获取select-text组件的源代码:随便找一个前端项目,在终端中执行npm install @miniprogram-component-plus/select-text,从nodes_module中找到下面组件 image 2.然后复制miniprogram_dist文件,粘贴到towxml目录下,miniprogram_dist重命名为select-text image 3.去decode.wxml中将{{item.text}}改成<select-text wx:if="{{item.text !== '\\n'}}" value="{{item.text}}" /> 4.在decode.json中添加"select-text": "./select-text" image

这样做格式还是会乱掉啊,你们真的没问题吗

目前我这边使用没有换行问题,但是有个iOS机型复制不了,大概是因为selectable属性被废弃了,安卓和其他iOS机型目前可以使用。其实select-text内封装的text组件用的是已经废弃的selectable属性,所以可以表现为inline行内。text组件新的user-select属性会表现为inline-block,会导致换行。

后面我发现了,忘记说了,其实是有问题的,细看select-text的代码,就发现它的核心就把text标签包装一下,然后设置selectable=“true”,这样就可以在安卓手机上复制了,但是对苹果手机无效,你得加个user-select="true",才能让苹果手机能复制。但是user-select="true"有个副作用,即它会把text的高度设置为一行文本的高度,即使你在视觉上看起来文本高度正常,但是你如果调试的话,就会发现文本的高度就只是一行。然后就会导致引用(md中用单引号 `` 表示的),除了最后一行,前几行的样式失效,同时不排除这个高度一行会影响到其他的样式。总之,我现在的结论就是苹果手机复制和样式副作用二选一,要么苹果手机能复制,苹果安卓样式都受影响,要么苹果手机不复制,安卓手机苹果手机样式都不受影响,但是安卓手机仍然能复制。目前我没找到其他的办法,因为复制就是通过text标签上加这两个css属性,除非你自己添加事件,通过js绕一圈去实现

对的,现在得用user-select属性实现复制,但是会导致换行,自己实现这个功能太苦难了,目前似乎没有办法了

Mageenz avatar Nov 01 '24 03:11 Mageenz

<text wx:if="{{item.text !== '\\n'}}" wx:for="{{item.text}}" wx:for-item="text" user-select="true" style="display: inline">{{text}}</text>

可解决

724493602 avatar Jun 06 '25 04:06 724493602

<text wx:if="{{item.text !== '\\n'}}" wx:for="{{item.text}}" wx:for-item="text" user-select="true" style="display: inline">{{text}}</text>

可解决

安卓手机上判断条件改为wx:if="{{item.text !== '\n' && item.text !== '\n'}}"有效,真机调试时发现安卓手机似乎不需要转义\n 另外使用user-select="true"会导致多数emoj表情失效,改为selectable正常

ysay-d avatar Jun 16 '25 04:06 ysay-d