前端实现菜单快速检索的功能

前端CSS

    <style type="text/css">
        .btn-box {
            color: #fff;
            width: auto;
            border-radius: 25px;
            min-width: 40px;
            height: 40px;
            margin: 9px;
            line-height: 40px;
            display: inline-block;
            position: relative;
            overflow: hidden;
            background-image: linear-gradient(315deg, rgba(0, 33, 64, 0.01) 0, #1431e0 100%);
            background-size: 104% 104%;
            cursor: pointer;
        }

        .btn-box span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 40px;
            text-align: center;
            font-size: 18px;
            cursor: pointer;
        }

        .btn-box input {
            display: inline-block;
            background: 0 0;
            border: none;
            color: #fff;
            padding-left: 20px;
            line-height: 40px !important;
            height: 40px;
            box-sizing: border-box;
            outline: none;
            vertical-align: 4px;
            font-size: 14px;
            width: 40px;
            transition: all .3s ease-in-out;
            font-style: italic;
            text-transform: uppercase;
            letter-spacing: 5px;
        }

        .btn-box:hover input {
            display: inline-block;
            width: 160px;
            padding-right: 40px
        }
        .btn-box input:focus {
            display: inline-block;
            width: 160px;
            padding-right: 40px
        }

        .btn-box input:not(:placeholder-shown) {
            display: inline-block;
            width: 160px;
            padding-right: 40px
        }

        .el-input--suffix .el-input__inner {
            padding-right: 0px;
        }
        .el-input__suffix-inner {
            display: none;
        }

    </style>

前端HTML

                <div class="btn-box mb20">
                        <span><i class="el-icon-search"></i></span>
<!--                        <input type="text" placeholder="" />-->
                        <el-select v-model="menusValue" filterable
                                   popper-append-to-body="false"
                                   placeholder=" " ref="searchRef"
                                   @blur="searchBlur" id="openSearchValue" style="padding-bottom: 30px;width: 100%" default-first-option="true" @change="openUrl">
                            <el-option
                                    v-for="item in menusAll"
                                    :key="item.url"
                                    :label="item.menuName"
                                    :value="item.url">
                            </el-option>
                        </el-select>
                    </div>

至于menu里面的内容需要你们自己组装了 

效果如下：