Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xuyuanwei678 opened this issue May 17, 2024 · 8 comments

Comments

@xuyuanwei678
Copy link

xuyuanwei678 commented May 17, 2024

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

@sbfkcel
Copy link
Owner

sbfkcel commented May 18, 2024

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

@kunkkaliu
Copy link

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

@chenqiuling
Copy link

chenqiuling commented Aug 15, 2024

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

@zhouzxx
Copy link

zhouzxx commented Aug 17, 2024

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

Mageenz commented Oct 21, 2024

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

我使用了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,会导致换行。

@zhouzxx
Copy link

zhouzxx commented Oct 28, 2024

我使用了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绕一圈去实现

@Mageenz
Copy link

Mageenz commented Nov 1, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants