手写一个类似 element-ui 的可输入下拉选择

效果图如下：

当鼠标点击输入框时，显示下拉滚动列表，点击后采用赋值给输入框；在输入框中输入值可以再我们的下拉列表数据中进行模糊匹配

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手写一个select</title><div id ="app"><input type="text"  class="my_input" v-model.trim="inputValue" @click="openSelect"><div class="my_select" v-show="showMySelect"><ul><li v-for="(item, index) in datas" :key= index><div class="select_item" @click="getClickItem(index)" v-show="canShowItem(item.value)">{{item.value}}</div></li></ul></div></div></head>
<body><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {datas: [{value: '蒜薹炒肉'},{value: '莴笋炒肉'},{value: '笋子炒肉'},{value: '红烧牛腩'},{value: '干锅兔'},{value: '番茄炒鸡蛋'},{value: '红烧牛腩'},{value: '干煸鸡'},{value: '红油抄手'},{value: '蒸饺'}],inputValue: null,showMySelect: false},methods: {getClickItem(index) {this.inputValue = this.datas[index].value;this.showMySelect = false;},openSelect() {this.showMySelect = true;},submit() {console.log(this.inputValue)}},computed: {canShowItem() {return (value) => {if (this.inputValue != null && this.inputValue.length > 0 ) {return value.indexOf(this.inputValue) >= 0;} else {return true;}  }}}})</script><style scoped >ul {list-style: none;padding-inline-start: 0;max-height: 200px;overflow-y: scroll;}.my_input {width: 100%;}.my_select {background-color: rgb(211, 211, 211);width: inherit;text-align: center;}.select_item {height: 32px;}#app {width: 400px;height: 400px;}</style>
</body>
</html>

手写一个类似 element-ui 的可输入下拉选择相关推荐

从0开始手写一个类似Linux的操作系统
一.效果这个操作系统取名为winux 主要实现了内存管理.线程.进程.文件系统.shell.进程间通信,是用来学习linux操作系统的不错选择,自从我做完这么一个系统再去看<linux内核设计 ...
element ui table 中加下拉菜单
<el-table-column prop="roleList" label=角色 :width="180"> <templat ...
ES6 手写一个“辨色”小游戏
1. 前言依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形.前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo . --项目源码本实例基于 ES6 实现,并兼容 ie9及 ...
zookeeper springboot_摊牌了！我要手写一个“Spring Boot”
❝ 目前的话,已经把 Spring MVC 相关常用的注解比如@GetMapping .@PostMapping .@PathVariable 写完了.我也已经将项目开源出来了,地址:https:// ...
摊牌了！我要手写一个“Spring Boot”
目前的话,已经把 Spring MVC 相关常用的注解比如@GetMapping .@PostMapping .@PathVariable 写完了.我也已经将项目开源出来了,地址:https://gi ...
Java 手写一个SQL分页
Java手写一个类似PageHelper的分页SQL 目前分页插件众所周知的莫过于和mybatis完美融合的PageHelper了,简单两行代码就实现了sql分页,配合PageInfo类,将数据总数量 ...
仿携程oracle课程设计,一个不错的仿携程自定义数据下拉选择select
这是一个仿携程自定义的数据下拉选择select,对一些比较重要的参数进行的描述,方便初学者 /* *id : id 当前插件的父元素 *data : json 选择的数据(json格式) *bool ...
未能加载文件或程序集或它的某一个依赖项_手写一个miniwebpack
前言之前好友希望能介绍一下 webapck 相关的内容,所以最近花费了两个多月的准备,终于完成了 webapck 系列,它包括一下几部分: webapck 系列一:手写一个 JavaScript 打 ...
用 Go 手写一个 JSON 序列化器
用 Go 手写一个 JSON 序列化器方案实现字符串转义忽略类型序列化器主体数字和逻辑类型字符串类型数组类型字典类型自定义结构类型指针类型 API 使用安装调用测试开源和 ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...

手写一个类似 element-ui 的可输入下拉选择

效果图如下：

完整代码

手写一个类似 element-ui 的可输入下拉选择相关推荐

最新文章

热门文章