<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;
}

 

 

GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐