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

最新推荐文章于 2024-05-05 00:40:40 发布

兜兜没有糖糖

最新推荐文章于 2024-05-05 00:40:40 发布

阅读量517

点赞数

分类专栏： css Vue 文章标签：前端

本文链接：https://blog.csdn.net/IOTbaqi/article/details/116674598

版权

Vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

效果图如下：

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

在这里插入图片描述

完整代码

<!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>

兜兜没有糖糖

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手写一个类似 element-ui 的可输入下拉选择

效果图如下：当鼠标点击输入框时，显示下拉滚动列表，点击后采用赋值给输入框；在输入框中输入值可以再我们的下拉列表数据中进行模糊匹配完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫