Vue implements a search box with a magnifying glass

This article shares with you how to use Vue to implement a search box with a magnifying glass. The specific content is as follows

Usage of font icons in input single tag:

The first step is to globally import the iconfont icon in main.js;
The second step is to dynamically bind an attribute to the input tag and set the value to the variable in data;
Step 3: Change the &#x in the font icon code to \u

The code is as follows:

<template>
    <div class="login">
        <!--Header Search-->
       <div class="top">
           <div class="top-text iconfont">Guangzhou&#xe612;</div>
           <div class="top-btn">
               <input type="text" :placeholder="icon" class="iconfont">
           </div>
           <div class="top-x iconfont iconlingdang1"></div>
       </div>   
    </div>
</template>

<script>
    export default {
        name:"Login",
        data(){
           return {               
               icon:'\ue637 Please enter keywords'
           }
        }
    }
</script>

<style scoped>
    .login{
        width: 100%;
        height: 100%;
    }
    .top{
        width: 100%;
        height: 0.8rem;
        background-color: pink;
        display:flex;
        align-items: center;
        font-size:0.35rem;
    }
    .top-text{
        margin-left:0.3rem;
    }
    .top-btn{
        width: 4.8rem;
        height: 0.5rem;
        margin-left:0.2rem;
        margin-right:0.55rem;
    }
    .top-btn>input{
        width: 100%;
        height:0.5rem;
        border-radius:1rem;
        border:none;
        outline: none;
        padding-left:0.3rem;
    }
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue realizes the product magnifying glass effect
Example code of Vue3 encapsulated magnifying glass component
Vue3 realizes the image magnifying glass effect
Vue implements the magnifying glass function of the product details page
Vue implements the magnifying glass effect of tab switching
Vue implements a simple magnifying glass effect
Vue3.0 handwriting magnifying glass effect
Vue implements magnifying glass effect
A handwritten vue magnifying glass effect
Vue3 encapsulates the magnifying glass effect component of Jingdong product details page

<<: Example code for using Nginx to implement 301 redirect to https root domain name

>>: Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]