脚本宝典收集整理的这篇文章主要介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的vue实现带放大镜的搜索框全部内容,希望文章能够帮你解决vue实现带放大镜的搜索框所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。