话题墙(小程序)

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.搜索接口()
  }
}