vue实现带放大镜的搜索框
作者：vevezai
这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下
字体图标在input单标签中的用法：
第一步，先在main.js 中全局引入iconfont图标；
第二步，给input 标签动态绑定一个属性，设置值为data中的变量；
第三步，将字体图标代码中的 &#x 改为 \u
代码如下：
<template>
<div class="login">
<!--头部搜索 -->
<div class="top">
<div class="top-text iconfont">广州</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 请输入关键词'
}
}
}
</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。