小米搜索框

代码有些地方不是很完善 ，可以根据自己需求进行改善

 InsCode - 让你的灵感立刻落地

html 部分

 <div class="app">
        <div class="Prodeuct-big-box">
            <!-- <input type="text" placeholder="红米K60" @focus="GetFocus" @blur="LoseFocus"> -->
            <input type="text" placeholder="红米K60">
            <span>🔍</span>
        </div>
        <div class="Product-list" v-show="isShow">
            <ul>
                <li v-for="(item,index) in list" :key="index">{{item.name}}</li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                list:[
                    {name:'手机换新'},
                    {name:'小米14'},
                    {name:'小米su7'},
                    {name:'红米K70'},
                    {name:'小米电视'},
                    {name:'小米手表'}
                ],
                isShow:true
            },
            // methods:{
            //     GetFocus(){
            //         this.isShow = true
            //     },
            //     LoseFocus(){
            //         this.isShow = !this.isShow
            //     }
            // }
        })
    
        </script>

css 部分

*{
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
}
body{
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Prodeuct-big-box{
    display: flex;
    width: 260px;
    height: 40px;
    padding: 0 0 0 5px;
    box-sizing: border-box;
    border: 1px solid red;
}
.Prodeuct-big-box input{
    width: 210px;
    height: 100%;
    border: none;
    border-right: 1px solid red;
}
.Prodeuct-big-box span{
    display: inline-block;
    width: 50px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
}
.Prodeuct-big-box span:hover{
    background-color: orange;
}

.Product-list{
    width: 210px;
    padding: 5px;
    border: 1px solid red;
    box-sizing: border-box;
}
.Product-list li{
    padding: 5px;
    cursor: default;
}
.Product-list li:hover{
    background-color: #eee;
}