Vue implements a search box with a magnifying glass

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.]

Recommend

Interpretation of CocosCreator source code: engine startup and main loop

Table of contents Preface preparation Go! text St...

How to handle images in Vue forms

question: I have a form in Vue for uploading blog...

Centos7 implements sample code for restoring data based on MySQL logs

Introduction Binlog logs, that is, binary log fil...

Zabbix combined with bat script to achieve multiple application status monitoring method

Scenario simulation: Some domestic companies need...

Detailed steps to build the TypeScript environment and deploy it to VSCode

Table of contents TypeScript environment construc...

Causes and solutions for cross-domain issues in Ajax requests

Table of contents 1. How is cross-domain formed? ...

How to set Tomcat as an automatically started service? The quickest way

Set Tomcat to automatically start the service: I ...

Unity connects to MySQL and reads table data implementation code

The table is as follows: Code when Unity reads an...

How to quickly install nginx under Windows and configure it to start automatically

Table of contents 1. Nginx installation and start...

Understanding JavaScript prototype chain

Table of contents 1. Understanding the Equality R...

Detailed example of using useState in react

useState useState adds some internal state to a c...

Solution to invalid margin-top of elements in div tags

Just as the title says. The question is very stran...

How to prevent the scroll bar from affecting the page width when the scroll bar appears on the page

Set the width of the body to the width of the wind...

In-depth understanding of JavaScript event execution mechanism

Table of contents Preface The principle of browse...

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

Question 1: The writing method that will report a...