sbfkcel/towxml

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

Opened this issue · 8 comments

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

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

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

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

我使用了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

我使用了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

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

我使用了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这位兄弟的做法,确实非常的优雅。具体实现我详细补充一下,方便小白: 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绕一圈去实现

我使用了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属性实现复制,但是会导致换行,自己实现这个功能太苦难了,目前似乎没有办法了