【Vue】实现仿微信输入@出现选择框
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
<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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)