【Vue】实现仿微信输入@出现选择框

最新推荐文章于 2024-05-07 11:48:41 发布

重生之搬砖忍者

最新推荐文章于 2024-05-07 11:48:41 发布

阅读量412

点赞数 1

文章标签： vue.js 微信 javascript

本文链接：https://blog.csdn.net/qq_54847700/article/details/137506709

版权

本文详细描述了一个使用Vue.js构建的文本输入框，当输入包含特定字符时，会显示下拉选项供用户选择。通过键盘事件处理，实现了上下箭头和回车键的导航以及选中项的自动填充。

摘要由CSDN通过智能技术生成

<div style="padding: 10px 10px" class="editor">
      <el-input
        resize
        type="textarea"
        :rows="4"
        clearable
        placeholder="请输入您的问题.."
        v-model="requestParams.prompt"
        @input="handleInput"
        @keydown.native="handleKeyDown"
      >
      </el-input>
      <div v-show="showDropdown" class="dropdown">
        <ul>
           <li v-for="(option, index) in dropdownOptions" :key="index" @click="selectOption(option)" class="dropdown-options" :class="{'dropdown-options': true, 'selected': index === selectedOptionIndex}">
              {{ option }}
          </li>
        </ul>
      </div>
    </div>

inputValue:"",
showDropdown: false,
dropdownOptions: ['选项1', '选项2', '选项3'],
selectedOptionIndex: 0

handleInput() {
      if (this.requestParams.prompt.includes('@')) {
        this.showDropdown = true;
      } else {
        this.showDropdown = false;
      }
    },
handleKeyDown(event) {
      if (event.key === 'ArrowUp') {
        this.handleArrowKeys(-1);
      } else if (event.key === 'ArrowDown') {
        this.handleArrowKeys(1);
      } else if (event.key === 'Enter') {
        if (this.showDropdown) {
          event.preventDefault(); // 阻止默认的回车键行为
          this.handleEnterKey();
        }
      }
    },
 handleArrowKeys(direction) {
      this.selectedOptionIndex += direction;
      if (this.selectedOptionIndex < 0) {
        this.selectedOptionIndex = this.dropdownOptions.length - 1;
      } else if (this.selectedOptionIndex >= this.dropdownOptions.length) {
        this.selectedOptionIndex = 0;
      }
    },
handleEnterKey() {
      const selectedOption = this.dropdownOptions[this.selectedOptionIndex];
      this.selectOption(selectedOption);
      this.showDropdown = false;
    },
selectOption(option) {
      this.requestParams.prompt += option;
      this.showDropdown = false;
    },

.editor {
  position: relative;
}

.dropdown {
  width: 200px;
  border-radius: 10px;
  position: absolute;
  // top: 0;
  // left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
.selected {
  background-color: rgb(50, 156, 255);
}
.dropdown-options{
  border-radius:10px ;
  cursor: pointer;
  padding: 5px;
}
.dropdown-options:hover{
  background-color: #ccc;
}