• 评论组件--uniapp textarea focus，string.replace

    最近使用uniapp做了个h5的项目，嵌入App使用。中间有个评论组件，把人整个够呛，前后改了好几遍。第一次开发，照着文档找组件，好不容易写了个差不错，结果发现在手机App里表现非常不理想，表现为textarea无法自动focus，input组件也是如此。周六加班终于搞了个差不错。

    问题1、textarea自动focus？？？

    本来的方案是，在底部做个假的输入框，click时，弹出textarea所在popup,结果popup弹出来了，textarea没自动focus

    分析：textarea自带的focus不好用

    解决：舍弃假的输入框，直接使用textarea所在的view，开始在底部定位，textarea的 focus事件里，将view的位置进行修改。

    问题2、评论取消后，textarea又无法聚焦了，即使focus使用了一个变量来控制

    分析：或许focus绑定的值需要变化，才能引起textarea是否能focus

    解决：取消评论后，及时将变量的值改为false，下次需要focus时，将变量值改为true

    问题3、评论框内需显示@xxx：，给后端发送请求时还不能带着

    分析: 评论时带着@xxx：比较好实现，发送时截取使用string.replace

    解决：string.replace(/@[0-9a-zA-Z\u4e00-\u9fa5]+:/, '')

    /@[0-9a-zA-Z\u4e00-\u9fa5]+:/，这个正则就是包括了 英文字母a-zA-Z数字0-9以及中文

    最坑的地方是 string.replace方法不在原来的string修改，而是返回了一个新的字符串，需要接收！！！！

    问题4、嵌入的App也没有做统一的处理，结果安卓手机键盘会盖在页面最上面，苹果手机则会将页面进行上推，我上面定义的view位置是bottom：50%，苹果手机给我推没了，5555

    解决：根据/iphone|ipad|ipod|ios/.test(window.navigator.userAgent.toLowerCase())，判断出是苹果手机后，定位bottom:0。

    附上代码，方便以后查阅。

    vue3版的uniapp

    1. <template>
    2. 	<view class="comment-wrap">
    3. 		<view class="title">评论view>
    4. 		<view class="comment-list" v-if="list.length">
    5. 			<view v-for="item in list" :key="`comment-${item.id}`">
    6. 				<Item :item="item" @reply="onReply" />
    7. 				<view class="second-list" v-if="item.comment.length>0">
    8. 					<Item avatar-size="22" v-for="jtem in item.comment.slice(0, 2)" :item="jtem"
    9. 						:key="`reply-${jtem.id}`" @reply="onReply" />
    10. 					<view class="check-more" v-if="item.comment.length>2" @click="openMoreComment(item)">
    11. 						查看全部{{item.comment.length}}条精彩评论  >view>
    12. 				view>
    13. 			view>
    14. 			<view class="more-comment-tip" @click="getMoreComment">{{more?'查看更多':'已经到底了'}}view>
    15. 		view>
    16. 		<view class="nodata" v-show="showCommentResult&&list.length===0">
    17. 			<image src="../../static/noContent.png" mode="">image>
    18. 			<text>暂无评论text>
    19. 		view>
    20. 	view>
    21. 	
    22. 	<u-popup :show="showMoreCommentPop" :closeable="true" mode="bottom" round="32" @close="closeMoreCommentPop"
    23. 		class="comment-input-popup">
    24. 		<view class="popup-title-custom">显示全部（{{moreComment?.comment?.length}})view>
    25. 		<view class="main-comment">
    26. 			<Item :item="moreComment" @reply="e=>onReply(e, 'first')" />
    27. 		view>
    28. 		<view class="popup-subtitle">全部回复view>
    29. 		<view class="comment-comment" v-show="moreComment?.comment?.length">
    30. 			<Item :item="jtem" v-for="jtem in moreComment.comment" @reply="onReply" />
    31. 			<view class="more-comment-tip">已经到底了view>
    32. 		view>
    33. 	u-popup>
    34.  
    35. 	<view v-show="showInputPop" class="c-mask" @click="closeInputPop" @touchmove.stop.prevent="disableScroll">view>
    36. 	<view class="iinput-view" :style="{bottom: showInputPop?isIphone?'0%':'50%':'0%'}" @touchmove.stop.prevent="disableScroll">
    37. 		<view class="c-popup-content">
    38. 			<view class="comment-input-wrap">
    39. 				<textarea v-model="comment" class="comment-textarea" :maxlength="250" :focus="replyFocus"
    40. 					placeholder="欢迎发表你的观点" confirm-type="send" auto-height @confirm="commentCommit"
    41. 					@focus="bindFocus" />
    42. 				<uni-icons v-if="hasComment" type="paperplane" size="30" color="#286CFB"
    43. 					@click="commentCommit">uni-icons>
    44.  
    45. 				<view class="cancel-text" v-if="showInputPop&&!hasComment" @click="closeInputPop">取消
    46. 				view>
    47. 			view>
    48. 			
    49. 		view>
    50. 	view>
    51. template>
    52.  
    53. <script setup>
    54. 	import {
    55. 		ref,
    56. 		getCurrentInstance,
    57. 		computed
    58. 	} from 'vue'
    59. 	import Item from './Item.vue'
    60. 	import {
    61. 		getCommentList,
    62. 		commentCreate
    63. 	} from '../../api/index.js'
    64. 	// 当前实例
    65. 	const {
    66. 		proxy
    67. 	} = getCurrentInstance()
    68.  
    69. 	const props = defineProps({
    70. 		articleId: {
    71. 			type: [Number, String],
    72. 		}
    73. 	})
    74.  
    75.  
    76. 	// 新建评论
    77. 	const comment = ref('')
    78. 	// 评论列表
    79. 	const list = ref([])
    80. 	// 新建评论弹窗
    81. 	const showInputPop = ref(false)
    82. 	// @回复内容显示
    83. 	const replyContent = ref('')
    84. 	
    85. 	// 回复目标ID
    86. 	const targetId = ref('')
    87. 	// 更多评论弹窗
    88. 	const showMoreCommentPop = ref(false)
    89. 	// 	一级评论展开的内容
    90. 	const moreComment = ref({})
    91.  
    92. 	// 是否显示评论获取的列表结果
    93. 	const showCommentResult = ref(false)
    94.  
    95. 	// 点击回复控制textarea的聚焦
    96. 	const replyFocus = ref(false)
    97. 	// 获取当前设备，如果是Safari，弹框将留在底部
    98. 	const isIphone = ref('')
    99. 	isIphone.value = /iphone|ipad|ipod|ios/.test(window.navigator.userAgent.toLowerCase())
    100. 	// 请求列表需要的page和pagesize
    101. 	let page = 1
    102. 	let pagesize = 10
    103. 	// 是否还有更多评论
    104. 	const more = ref(true)
    105. 	const hasComment = computed(()=>{
    106. 		return comment.value.replace(/@[0-9a-zA-Z\u4e00-\u9fa5]+:/, '').trim().length>0
    107. 	})
    108. 	const requestList = async () => {
    109. 		const params = {
    110. 			article_id: props.articleId,
    111. 			target: 0,
    112. 			page,
    113. 			pagesize
    114. 		}
    115. 		const {
    116. 			data
    117. 		} = await getCommentList(params)
    118. 		if (data) {
    119. 			// 判断是否需要显示还有更多
    120. 			more.value = Math.ceil(data.total / pagesize) > page
    121.  
    122. 			data.list.forEach(item => {
    123. 				item.comment = itFn([], item.comment, '')
    124. 				item.comment.length && item.comment.sort((f, s) => (+new Date(s.created_at) -
    125. 					+new Date(f.created_at)))
    126. 			})
    127. 			if (params.page === 1) {
    128. 				// 显示有无结果
    129. 				showCommentResult.value = true
    130. 				list.value = []
    131. 			}
    132. 			list.value = list.value.concat(data.list)
    133.  
    134. 			if (showMoreCommentPop.value) {
    135. 				updateMoreCommentData()
    136. 			}
    137. 		}
    138. 	}
    139.  
    140. 	// 一级评论更多里面回复后刷新数据
    141. 	const updateMoreCommentData = () => {
    142. 		moreComment.value = list.value.find(item => item.id === moreComment.value.id)
    143. 	}
    144.  
    145. 	// 	递归得到所有1级评论的回复
    146. 	function itFn(target, comment, text) {
    147. 		if (comment.length > 0) {
    148. 			for (let i = 0; i < comment.length; i++) {
    149. 				let item = comment[i]
    150. 				if (text) {
    151. 					item.replyContent = text
    152. 				}
    153. 				target.push(item)
    154. 				if (item?.comment?.length > 0) {
    155. 					let str = `@${item.username}:${item.content}`
    156. 					itFn(target, item.comment, str)
    157. 				}
    158. 			}
    159. 		}
    160. 		return target
    161. 	}
    162.  
    163. 	requestList()
    164. 	// 提交评论
    165. 	const commentCommit = async () => {
    166. 		let commentStr = comment.value
    167. 		commentStr = commentStr.replace(/@[_-0-9a-zA-Z\u4e00-\u9fa5]+:/, '')
    168. 		commentStr = commentStr.trim()
    169. 		if (commentStr) {
    170. 			const {
    171. 				data
    172. 			} = await commentCreate({
    173. 				aid: props.articleId,
    174. 				content: commentStr,
    175. 				target: targetId.value ? targetId.value : 0
    176. 			})
    177. 			if (data) {
    178. 				uni.showToast({
    179. 					title: '评论成功',
    180. 					icon: 'none'
    181. 				})
    182. 				comment.value = ''
    183. 				closeInputPop()
    184. 				requestList()
    185. 			}
    186. 		} else {
    187. 			uni.showToast({
    188. 				title: '内容不能为空哦',
    189. 				icon: 'none'
    190. 			})
    191. 		}
    192. 	}
    193.  
    194. 	const openInputPop = () => {
    195. 		showInputPop.value = true
    196. 	}
    197.  
    198. 	// 组件内回复, type==='first'时是一级直接评论，不用增加@内容
    199. 	const onReply = (e, type) => {
    200. 		// 组件回复
    201. 		if (e) {
    202. 			comment.value = type === 'first' ? '' : e.prefixContent
    203. 			targetId.value = e.targetId
    204. 		}
    205. 		openInputPop()
    206.  
    207. 		replyFocus.value = true
    208. 	}
    209.  
    210. 	const openMoreComment = (data) => {
    211. 		showMoreCommentPop.value = true
    212. 		moreComment.value = data
    213. 	}
    214.  
    215. 	const closeMoreCommentPop = () => {
    216. 		showMoreCommentPop.value = false
    217. 		moreComment.value = {}
    218. 	}
    219.  
    220. 	const closeInputPop = () => {
    221. 		showInputPop.value = false
    222. 		replyFocus.value = false
    223. 		comment.value = ''
    224. 		targetId.value = ''
    225. 	}
    226.  
    227. 	const getMoreComment = () => {
    228. 		if (more.value) {
    229. 			page++
    230. 			requestList()
    231. 		}
    232. 	}
    233.  
    234. 	const disableScroll = () => {
    235. 		return
    236. 	}
    237. 	const bindFocus = () => {
    238. 		showInputPop.value = true
    239. 		// 1级弹框底部直接触发的
    240. 		if (showMoreCommentPop.value) {
    241. 			targetId.value = targetId.value ? targetId.value : moreComment.value.id
    242. 		}
    243. 	}
    244. script>
    245.  
    246. <style lang="scss" scoped>
    247. 	.comment-wrap {
    248. 		padding: 40rpx 32rpx;
    249. 		width: 100%;
    250. 		height: auto;
    251. 		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
    252. 		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
    253. 		.comment-list{
    254. 			padding-bottom: 10vh;
    255. 		}
    256. 	}
    257.  
    258. 	.title {
    259. 		margin-bottom: 40rpx;
    260. 		width: 100%;
    261. 		height: 48rpx;
    262. 		font-size: 34rpx;
    263. 		font-family: PingFangSC-Medium, PingFang SC;
    264. 		font-weight: 600;
    265. 		color: #1F2227;
    266. 		line-height: 48rpx;
    267. 	}
    268.  
    269. 	.second-list {
    270. 		padding-left: 80rpx;
    271. 	}
    272.  
    273. 	.more-comment-tip {
    274. 		height: 104rpx;
    275. 		font-size: 24rpx;
    276. 		font-family: PingFangSC-Regular, PingFang SC;
    277. 		font-weight: 400;
    278. 		color: #8F959F;
    279. 		line-height: 94rpx;
    280. 		text-align: center;
    281. 	}
    282.  
    283. 	.comment-input-popup ::v-deep .u-popup__content,
    284. 	.c-popup-content {
    285. 		padding: 38rpx 28rpx;
    286. 		width: 100%;
    287. 		background-color: #fff;
    288. 		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
    289. 		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
    290. 	}
    291.  
    292. 	.comment-input-wrap {
    293. 		width: 100%;
    294. 		display: flex;
    295. 		flex-direction: row;
    296. 		justify-content: space-between;
    297. 		align-items: center;
    298.  
    299. 		.cancel-text {
    300. 			margin-left: 8rpx;
    301. 			width: 60rpx;
    302. 			font-size: 28rpx;
    303. 			color: #286CFB;
    304. 			flex-shrink: 0;
    305. 		}
    306.  
    307. 		.comment-textarea {
    308. 			flex-grow: 1;
    309. 		}
    310.  
    311. 	}
    312.  
    313. 	.reply-block {
    314. 		padding: 8rpx 16rpx;
    315. 		margin: 16rpx 0;
    316. 		font-size: 24rpx;
    317. 		font-family: PingFangSC-Regular, PingFang SC;
    318. 		font-weight: 400;
    319. 		color: #8F959F;
    320. 		line-height: 34rpx;
    321. 		background: #F5F6FB;
    322. 		border-radius: 8rpx;
    323. 	}
    324.  
    325. 	.check-more {
    326. 		margin-left: 56rpx;
    327. 		margin-bottom: 32rpx;
    328. 		height: 34rpx;
    329. 		font-size: 24rpx;
    330. 		font-family: PingFangSC-Regular, PingFang SC;
    331. 		font-weight: 400;
    332. 		color: #999999;
    333. 		line-height: 34rpx;
    334. 	}
    335.  
    336. 	.popup-title-custom {
    337. 		margin-bottom: 28rpx;
    338. 		height: 48rpx;
    339. 		font-size: 34rpx;
    340. 		font-family: PingFangSC-Medium, PingFang SC;
    341. 		font-weight: 500;
    342. 		color: #1F2227;
    343. 		line-height: 48rpx;
    344. 		text-align: center;
    345. 	}
    346.  
    347. 	.popup-subtitle {
    348. 		margin: 32rpx 0;
    349. 		height: 40rpx;
    350. 		font-size: 28rpx;
    351. 		font-family: PingFangSC-Medium, PingFang SC;
    352. 		font-weight: 500;
    353. 		color: #1F2227;
    354. 		line-height: 40rpx;
    355. 	}
    356.  
    357. 	.comment-comment {
    358. 		max-height: 50vh;
    359. 		overflow: scroll;
    360. 		padding-bottom: 10vh;
    361. 	}
    362.  
    363. 	.nodata {
    364. 		display: flex;
    365. 		align-items: center;
    366. 		justify-content: center;
    367. 		flex-direction: column;
    368. 		font-size: 28rpx;
    369. 		line-height: 40rpx;
    370. 		color: #A5A9AF;
    371.  
    372. 		image {
    373. 			width: 256rpx;
    374. 			height: 256rpx;
    375. 		}
    376. 	}
    377.  
    378. 	.comment-textarea {
    379. 		padding: 5px 15px;
    380. 		border: 1px solid #aaa;
    381. 		border-radius: 16px;
    382. 	}
    383.  
    384. 	.c-mask {
    385. 		position: fixed;
    386. 		left: 0;
    387. 		top: 0;
    388. 		z-index: 10075;
    389. 		width: 100vw;
    390. 		height: 100vh;
    391. 		background-color: rgba(0, 0, 0, .5);
    392. 	}
    393.  
    394. 	.iinput-view {
    395. 		position: fixed;
    396. 		left: 0;
    397. 		bottom: 0;
    398. 		z-index: 10077;
    399. 		width: 100vw;
    400. 		min-height: 10vh;
    401. 		background-color: #fff;
    402. 		box-shadow: 5px 0 0 5px #f5f5f5; 
    403. 	}
    404. style>

  • 相关阅读:
    想带着学生做一个操作系统，可行性有多大？
    云赛道---人工智能概述（重点总结）决赛准备
    代码优化技巧
    解决问题:-1: error: LNK1104: 无法打开文件“D3dx9.lib”
    L9170 LGCN 原厂直销5A大电流输出DC双向马达驱动电路IC
    牵着她——表白代码（Python实现）
    AI标注已达人类水平，RLHF或许将再不需要人类
    asp.net+sqlserver团购网站c#
    vue3响应式
    C#.NET CORE .NET6 RSA 私钥签名 公钥验签（验证签名） ver:20230614
  • 原文地址：https://blog.csdn.net/sdaulee/article/details/126322586