话题墙(小程序)
赵钊 2023/5/12
# 1.需求分析
话题墙出现:
- 光标处为
'#'; - 点击话题按钮拉起话题墙功能;
# 2.实现思路
- 监测光标处的字符是否为
#号; - 点击
话题后,文本追加#号; - 追加话题;
(1) 监测textarea处的字符
handleInpit(e){
const {value,cursor} = e //获取输入值和光标位置
if(this.textareaVal[cursor-1] == '#'){
//触发搜索
this.searchFlag = true
//记录当前位置
this.searchStart = cursor
}
}
(2) 点击话题按钮触发搜索
topicClick(){
//获取textarea的文本拼接‘#’
const str = this.textareaVal + '#'
if(this.textareaVal.length <= 1){
this.searchStart = 1
}
this.searchFlag = true
}
(3) 话题点击
//话题点击
cellClick(e) {
// 标签名追加拼接
let newTextareaValue = '#' + e.currentTarget.dataset.name
let Str = ''
if (this.searchStart !== 0) {
Str = this.textareaVal.slice(0, this.searchStart - 1) + newRemarksValue
} else {
lastStr = this.data.remarksValue + e.currentTarget.dataset.name
}
this.remarksValue = lastStr
if (!this.activityIds.includes(e.currentTarget.dataset.item.id)) {
this.activityIds.push(e.currentTarget.dataset.item.id)
}
// 重置数据
this.searchFlag = false
this.searchStartSt= 0,
this.isShowRemarks= true,
this.topicButtonClick= false,
this.activityList=[]
})
},
(4) 搜索函数
//搜索函数
search(){
if(searchFlag){
//截取关键词
this.searchKey = this.textareaVal.slice(searchStartStr, this.textareaVal.length)
this.搜索接口()
}
}